.NET 8 Blazor Wasm Employee Management System - Export Employee Data to EXCEL, PDF and PRINT - Final

hello everyone welcome back to net code H Channel  I am Frederick and I'm happy to have you here   today in this video we are going to look at  how to export data to Excel or PDF and also   we're going to make print available we're going  to have all our tables that is the employee table   adding or performing crowd on employee and also  um adding vacation over timetable health table and   also sanctions table we're going to make export  Excel PDF and print also available to each of the   following tables whilst we also make search and  pagination also available so trust me and stick   around because it's something that you're going  to love it when we are done with this this is   actually a complete project that I have or we you  and I have built together all right so this what   I'm going to do I'm going to to leave this source  code in there and um I'll make the link also   available so if you want to grab this you can also  do that so I do offer coaching session to people   who are interested in Blazer whether you're a  beginner or you're in advance you want to improve   your skills I can help you do that so if you want  to get in touch check the video description and I   have the link over there actually not a link it's  an email that you can write um 8 through 8 all   right so from part one up to at six this is what  we've done so far we have our Banner on top here   this is a layout that we have it does not change  as soon as the page or when the page navigates   to other component is still stack we have our nav  bar in here and you can see this is a default one   but we've customize it to suit what we want we  have this and this where the company can set up   for J Department department and our branch and so  country City and town and so we have the employee   so we made this in the part six up to the part  one and now when we check this we ended up to   the employee so if I click on this I have this  this form that I can just click on I can just   fill add a new employee okay I can close this form  and I can click on next since you're using an edit   form with unvalid submit using Thea anotation  component and also the validation summary like   you see we have it filled here that you need to  actually do something okay before you go to the   next one so this is where we ended and if I click  on this I must um add or fill this form so we're   going to have a look on how to complete this  and how to actually work on the various tables   that we have such as the vacation the overtime the  doctor table that's going to be the health table   and also the sanction table as well all right so  we have a lot of work to do today because you're   going to make everything complete today we not  going to have another video for this okay so   trust me you're going to work fast and run like  a rabbit as we did in the previous uh videos okay   so that's what let's see but let's first have  a look on this you want to solve the issue if   I run this or if I refresh this application the  first time they upload the screen is blank have a look you see so it is blank and you don't  want to do that this application is mainly   based on employees so what we're going to do  here is as soon as the page loads we want to   have this employee as a default open opening so  this must get opening so as soon as you load the   page you're going to see this employee and Page  loaded on the screen okay so let's finish let's   handle that so to solve this issue is very very  simple and I believe you've have an idea to to   do that what what kind of idea is that what do you  think we can do to handle this you see we have our   container right the state container and that is  what we are using to handle this using the event   or the action okay so we can set it to that let's  quickly go to the source code of our project in   here now when you check this solution you can  see that you have the state container where   is it have you found yours go to the client and  see this application state or state so you could   also group yours in VAR States but here I made  a a default a general one and now from this all   state you see we have Department Brands country  city um we're going for looking for employees so   show employee let's set this to through and that  is what we want very simple one okay so when you   save this that issue it is now solved so all  of these are going to set to force but only   the employee default going to set you through and  that going to make it shown on the screen you can   also change it to user you can change to anyone  so when the next day when the company calls me   to set the the user as a default I just have to  come in here clear this one and I'll um um add   this one here very simple and I have to charge  them for doing that isn't it okay so that is it   so you can also switch between the view and the  high default Ones based on setting up this yeah   that's magic so once you're done with this what  is the next thing that we have to um work on so   if you check the app from this add employee you  can see that soon as I'm done with this uh I can   click on next but if I'm done here and I'll fill  everything up and decide to click on the next one   see what happens nothing happens right so let's  handle that and also if I click on this I have to   navigate to the list page this page must get  shown but you see it is not showing so let's   also handle that so let's clear all screen let's  clear all the tabs here and now um that form it is   found in the add or update employee so that is  this one we can choose that from this employee   pages in the content uh pages okay now you see  from here we have two groups of um models here   it is the same employee model that we have divided  into two based on the form that we've created okay   so we have the first layer we have the second um  layer in here so that's the first layer there the   second layer and now we are switching between and  show based on true or force that we have based on   the Nam that we have stated in the second layer  set through now the first layer is force and   that's going to make the second layer to be shown  when we set the second layer to for and our first   layer to through it mean second layer is going to  be hidden and at the first layer is going to be   shown right I believe we've done that in the part  six now the next we going to have a look here is   you see each is submitting to a form this is form  two for the second layer now when you check the   form one the first section that is first layer it  is submitting from form one you can see we have   this data annotation validator when you create  this method in here and then we bind it up to   this as soon as I click on the next button this  method has to get R from Top up to down from Top   up to the bottom before it checks the validation  system and in this case you want to click on that   the next button is this when we done clicking on  this form one we want to check if this form is   being um validated and also we want to navigate to  the next component to the next session to display   the form two if this page has no empty space okay  but if you try to create this from one method and   I'm trying to click on maybe show this and show  that it's going to have an issue although we have   not added anything to the table but it's going to  have it's going to move to the next table so to do   that we have to handle the validation ourself so  have to do that we going to also check it maybe   you can also do some customized check um to this  if form one has everything then we want to hide   form one and I show form two I believe you're  getting the concept right that's fine so let's   see from here let me just hide this St because we  done this already now in here we have show Layer   Two show and the previous click so maybe down here  we can do the validation so we are doing forms validation okay so we have form one this is form one I have to commment this okay so form one we  want to create a simple method to check you know   the model that we created we divided into grouping  one and then grouping two maybe you can improve   it by changing the name to maybe something uh uh  meaningful not this so you can see we have private   is returning the type here it is Boolean so you  say validate employee group one now we checking if   none is null okay we want to return this through  so we are saying if this is not return Force   meaning something is not going on here that's why  we using all so it means even if one of this is   not um is now we're going to have this issue going  to return false if not it's going to return true   so when this method returns through you know we've  retrieve or we've seen that the form one is been   validated okay so here is what we doing so after  doing this we have to also work on the form two   so let's also check form two as well now when we  divide the model you can see we have this form two   or the employee group two has only the job name or  the job title it has the town ID and the branch ID   which are casc drop down okay so we have this and  each is null if when you have the employee group   for the job name is null or if the group ID here  the town ID is equal to zero or the branch ID is   equal to zero it means the user has not selected  any of them then return Force so in that we not   going to move to the next one or we're not going  to even submit the form to the the method that   we going to create okay else then submit it so  this is what we are doing here so what of the   question is what of if each returns through and  everything is in order the person made everything   available then we have to extract you know we  have two edit forms and we have two separate   models employee group one model and now employee  group two model so we are going to extract both   data and now put it or inside the employee single  instant that we've created remember that we have   this employee instance created in here and that's  what we are going to invoke okay we're going to   return so we have to ask for this we created it  up for tempor one so we can set up the values in   here we can divide or split this and I'll set to  this after doing that we have to combine this and   I'll assign to this employee and this going to be  the sender okay so the return type must be this   employee not employee group one or group two so  in doing that we have to have a single method to   extract it but you know saying this going to be  going to handle with an event call back we have   to create the parameter first then we can handle  that so we have this event call back and going to   return an employee to the parent component and  aside from that let's extract from one as soon   as I click on submit and I'm going to check first  if check here so we going to extract this okay so   when you click on that you're going to extract  the properties here and now um um then we're   going to make a call to this or maybe we can also  check this first because maybe we don't want to   extract while group one it is some some something  is null all right or each or some of the forms in   there or the test box is null so maybe this what  we can do we can firstly call this to skip some   errors in here we can um call something like this  we call this method first this going to check if   this employee group one is null if each property  in this is not then we want to just call this   method to extract it right this Mak sense isn't  it so we're going to say that if okay this is not   if this is true meaning none of the properties  here it is null so we can then extract this in here maybe you are asking or you're saying oh we  can simplify this you can just copy this method   and um put it up to this condition yes it's  still going to work by making a the bargain   very difficult I can put a break point here and  I can have the value stored here either true or   false if I put this here it become very difficult  for me to debug it and I know the cost of this or   the output of this method that's the reason why  it is it is better you have to cash it you cat the   the response or the result then you can now verify  if only want to verify okay after extracting then   please show Layer Two so we can just move this  to here I hope this makes sense fine so that's   what this form one is going to do so as soon as  I click on this this is going to shown through   now when to check this um Layer Two maybe if I Pip  this let's see if going to have the definition for   this layer two check it out we're going to set  first layer to force and now show second layer   that's what we are doing right so this is going  to make that work now when we check from group   two for the the next s that is the session Layer  Two when the user also decide not to choose any   not to uh provide the value for each or any test  box since we are validating this you're going to   going to have the same issue in case everything  is working then we have to also save Layer Two   not Layer Two form two now when we are creating  this form two method we also going to do same   with this you're going to also validate it then we  can um just have a look on that okay so let's see   what we going to do in here do from the form two  this is a form two then we are checking we can see   we are extracting it first and as I said on this  is not the best so we can uh make this happen in   here so if this is true then we want to receive  light date emplo group two if this is true then   we have to extract it after extracting the adds  in here we invoke this method after um invoking   this we want to set this container to empty so  that it makes it available for other to type   or to maybe this some modification Etc or to add  a new employee so this is what we are doing but   maybe maybe for this employee instead of setting  this to new here you could wait um maybe um after   sending it and maybe there's a validation issue  in there maybe the data has already added a name   has been added already and the person wants  to change the name you can make it available   before you clear it if not as soon as we invoke  this you're going to clear so when you have any   feature error the employee is cleared unless the  person enters the whole data again okay but this   what you want to do for now so you make sure that  before you type in you know what you're doing we   don't want to try an error in application okay so  let's um save this we have our form ready and we   are going to try this out and now here we going  to invoke it to this Method All right so here   when you use this add or update chat component  in the parent component we can now extract this   communication um and extract the model property  from it and I use it in the parent component so   after doing this definitely we're going to have  an issue here check it up when you go down here   this what we did the last video to exract or  to get the branch ID and then to get the town   ID as well we have this P right here so we need to  remove this you don't want any duplication then we   have this um dispose Method All right so this is  what we have in here let's remove all these empty spaces and even with this you can  simplify this using um this Lambda   expression instead of creating this  and making taking the whole Space we   can make this simple isn't it let's have a  look on how to do that so that's what I'm   doing let's make this okay so you can see  this becomes cleaner and also um simple as well we don't need to be using  this block block blocks you can do this just one line and that is it  isn't that beautiful yes it is and   I believe you like this right so try  to use it all the time to make things   up simple and easier to read or okay  this is the last one let's finish that up I think this must have an A we right  oh am I missing something here let's   see okay okay okay okay okay so this why I did think this must been a weight okay no they  shouldn't be it should be like this so what do   you think yes okay so all set as can see very  simple one that we've done all right so this is   working we are done with this one and let's  handle this component in the parent so if I   click on ADD what am I going to do what can I do  we have our UI created design already using this   drop down list to have this popup okay so let's  see first we are going to run this application   again and I'll see what we have so let's see add  employee and if I click on this I have this issue   let's try to pass in something um something in  here right so let's see you know this must be   number if I click on next then let's say could see  yes validated and I we have the form two displayed   in here we have this take note I have the job  name I have to if I decide to click on Save see   what happen I need to select job name I need to  select town and I need to select what branch now   why did I not show information or instruction  or warning against this take note okay fine   so let's see I decid to passing job name or  job title that's fine it's working now if I   decide to forget this and I click on select Town  see nothing happened no record found no record   found click on Department no record found click  on City no record found the records are found in   this general department okay for now there's  no record fund because you have not provided   it but as soon as I click on this I'm going to  have all the record in here as soon as I select   any of the record I'm going to have it populated  in department and as soon as I select any of the   department I'm going to have it uh towns um or  eight Branch separated or displayed in here so   we have general department we have Department  you're going to have Branch not town we have   country we're going to have City you're going to  have town so that's why you say it is a cascaded   drop down one must finish the tax first before  the other before the other so in a hierarchy   form that you cannot skip you must start from one  and end up to where supposed to end now you can   see as soon as I click on the next I have this  form fill up so if I click on previous it goes   back so I'm the first session click on next second  one further so you can actually improve this you   can add when you have maybe three or four forms  you can um do the this is a customized one there   are some third party library that we can use to  actually have the same idea all right but this is   a customized one and I like to build my custom  one so I'll know the two and throw what goes   in what goes out into that component or that form  that I have all right if I click on this close to   it is working but let's handle this close system  if I click on close I want to show this employee   okay so let's go to the code now down here so  if I click on that is a form close we want to   notify the parent that hello a chart component  method has been clicked so please do you can   you change yourself a little bit okay so that  is what you want to do now let me give it name   as form closed notify parent form has closed  it is returning is a void it going to return   nothing it's just a message it's an alert that  is giving up and let's have this method in here   as soon as I close the form there is a method  name so close form all right so this close form   this must be capital F now with this close form  you see that here we want to notify perent we're   going to invoke it in here and that is it what  is it saying okay so we have this already right   ambiguity between Noy close and five close it  mean that we have this created already let's have   a look if we have it set H okay so that is this  one right so you can see we have it set already   so I need not to but I'm sure let me remove it  from this side yes you want to put it on top here minimize this on to make it clear invisible  yeah so form close close form this is what you're   going to notify the parent then we're going  to set the they show or add update employee   to force and that is this current component set  this to force and I take note if I click on this   check top here the whole content is be surrounded  with this so in case they set to four so this set   for here is going to be the internal one and  it's going to be the global one remember that   the allate is a global but it's going to be  um an internal one is it Global or not Global   internal okay so we have this let's save and  let's go to we have this close form so let's   make it fix the name well okay so before we go  up to the the parent to handle that I want ask   also finish the complete something in here check  take or check this for me you can see from the   photos have you seen or I can just come closer  you see the photo here we must have this input   file but what do we have here that's fine input  test and is it the right thing no it's not the   right thing so we have to use the input file and  I want to handle that now in an image you want   to convert into basic defa string then you want  to store it in database as a string file okay   so we can be using it all the time so let's do  that so we're going to remove this the input in here so actually for this where we have this  input file where supposed to be that is this   one we can just overwrite this whole  method with this we have the same form   group um margin top as three you have  a label and on this label we are making   a check okay so using T opor we checking  if this component is a component if this   property here is equal to empty then display  empty now the test is going to be your test danger and and we checking up here if the same is  equal to null we want to display this upload image   and now image upload message this a test that  you want to display this is your property now   with this what we're doing here is a class take  not this a class so in case we have any message   in here we want to make it as red okay test  danger in case you have any error message you   want to display it here so this property here  is going to handle all errors which is going   to happen during um program or is it program  image uploading okay we have this input file   and now there the unchange event we call this  method as upload event this is the validation   message as soon as decide the user decide not  to upload image we're going to have with this   um issue so that's a validation message going  to have the message display to the user okay   so let's handle this one property here and our  one method uh or event so let's come down and   maybe what we have this validate validate here  before the viid dat we can actually have file upload so in here we you can have this method  upload and it is coming with an input file change   event act so we checking it over here if the file  contains PNG it means we allowing only PNG files   we create a format we read the request then we  create the buffer resize it then we going to   convert to Bas defa string the uh the size that we  have we convert to Bas default string okay then we   set this property to null that's where you have no  issue but in case this does not contain PNG then   we say PNG file needed then we will have to return  so we have to create a property to handle this and   maybe on top here we can just have a property  State up here as an image upload message so we   have it set okay now let's go in there and um try  to display the the image we want to preview the   image to the user the selected image we want to  preview it so how can we handle this so when you   go up here what we have this the employee name  the telephone number and the address we want   to create one and u u display the image preview  in here okay send the user select it we have it   um converted and now cash it in there we want to  Now set it up in here so 100 is not pixels it's   already so we want to set up the the the image as  the source going to be the emplo group 1. photos   and you know at the end when you check the code in  here when we are done when we are done uploading   the image we see we are setting the photo string  here that's a property to the image data so as   soon as this get set we're going to have it um  displayed in here for us so get set and now get   shown that is what we are doing get set and now  here is going to um show it where is it um where   do we have this image it's coming from the form  one so this is second layer second layer we have   it this the input file and that is this one I hope  you've seen that okay so we're going to also shown   this all right so once you're done with this we  want to now go in there and now see now once we   have this you not going to do we're going to  use it for only add employee right it's going   to have an update and also add so let's change  this let's make this as Dynamic reset this as   title and once you have this definitely it tells  you that we're going to have a property to handle   that as title so let's go to the the base where  we have the code section and in here we can have   um the title here right or we can let's see I can  just move this up from here then maybe let's put   it here title and also aside from that you're  going to have access to the general department   that is are going to select the department the  brand the city the town okay so in order to do   that let's also have some properties to handle  that so we can display them on the screen the   selected user that the user selected during  adding that specific employee because here   the user can update the employee and we want to  display the various general department selected   the department selected the branch selected the  count country the city and now the town so you   can see that here we have it what is selected  from the location and also from the Department   you have them in here then we change the title  as well they are all public meaning that when we   make a reference to this component we can retrieve  these properties from that component okay in the parent now for the title we set the default  value to add because when the page um loads or   initializes it's going to have ADD as a default  and that's what we want to do so once you have   this we have to go in there and I set this on  top of each of the drop downs in here so you   can see we have from here we have that is going  to be the department right we have our um depart   this general department we have Department we  have Branch when you go to the second one you   have this country City and our town so if it's  an update this is going to run when the the form   is adding a new employee but all of if the form  is adding a new or already is updating already   added data as an update then what can we do  so from this since the property that we have   is going to contain values we can we are going  to check if it is now it means it's an adding   of a new data then we want to display maybe um  select gener depart by in case it is not now   it has data then we want to set it to the data  that it has right so maybe we can remove this   from what we have in here then we can use we can  hold on with this so you can see we having the   straight gender oh this general not gender so  this General we have um general department if   is equal to empty then display this you see all  of the you're using this scary operator to check   that if it is not then display this then where  can we use this just copy this now in here just   let's use the ad and now let's p is here that  is all we are done with this okay so when it   is going to update you're going to have this  work in here let's do same for the the other one and that's going to be the department so we   have the department here where from it  this a department right so let's remove this then we're going to have select department  but I believe you must also have this you   must have a label down here too so select  Department we must also have a label select Department okay then let's go to the next one  and this is the department this is going to   be the branch so not City so select branch  so in that we're doing the same so you can   even pause the video and then try your best  your hands on it if you can actually achieve   what we going to do the next one that is  this one okay I hope you you got the same   thing isn't it yes fine so we can actually do  move on so we have this set now let's go to   the location and we have country City and  our town we do same isn't it so pause the   video and I give you some maybe one minute  try your hands on it and let's see let who   finish it first so I have this select country  and I'm going to paste it here you know copy   and paste it's very sweet so I I encourage  you to use copy and paste all the time not   to repeat yourself all the time be typing  and typing and typing so select City we do same okay then the last one is Select town to we  do the same so town we do same okay control KD   then let's save it okay so that is all this this  form is available for add data add employee and   also update employee or edit employee is going  to work on that so when I was working on this   came to my mind we want to actually dynamically  clear the content you can decide to leave the   content and we can actually clear it okay so  it's better that I sh you the way to clear so   let's have a property down here they going to  be a public method which can be invoked in the   parent component you can see when we save let  minimize this when we save the form where are   you saving do you know where we are saving this  is the first this is where we are saving right   form one we save it in form two that's where we  invoke this you can see we are claing the content   here and it's not the best so so as I said this  earlier on we can actually have a simple method   down here to clear the content and it is the same  so clear content and we put it in a single method   in here okay so that they become Dynamic and we  can um clear it we can decide to clear we can   decide not to clear okay and I leave it in there  okay so we have this we can save this and that   is all done and set I believe we have nothing to  do again here we can say goodbye to this add or   update employee form yes of course we are done  with this so let's run this and now test it up   and see if the form is working and everything  is intact as we you and I expect okay so if I   click on this add employee we have a beautiful  form displayed and you can see nothing happen   here maybe you can decide to show a default  image if the person hasn't selected any image   yet but maybe you can to hide this you can do it  yourself isn't it yeah TR pass you now let's say   I'm going to pass in some names I click on next  and see photo field is required and you need to   actually do some magic here to get the photos  for me yeah so that's what is telling you but   you can't hear I only can hear you see we have a  default one is upload image see you can see from   the list here I have this images as a background  so I'm going to select this this is a JPG file see   what happens it tell you PNG file required okay so  it's going to update automatically and you need to   actually um have it set and let's choose another  one so I'm going to choose this guy and see what   happens upload image and that's fine it's gone  check here you have the image watching you hello   how how are you okay yes so we have it in here  click on next and see what happened next page   so it has submitted then we have the form being  retried the data being retrieved and now save   it to the employee model we can now actually um  fill up here and click on Save right if I click on   save you know what's going to happen job name and  Etc has been provided okay if I click on the C it   has to okay so this has to be handled because we  are notifying the parent but we haven't retrieved   it and we haven't called anything so we have to  also handle that so our form is actually working   as expected and that is all so we can move on um  from this ad or update employee into the parent component so let's close this then we going to  okay so save this and everything is intact now   we have this let's go to solution and let's have a  look from this employee page and that is a parents   page for this ad or update employee that is a  page which displays the list in here so you can   see when I click on this show menu that's where we  have our SF grid sying data grade which displays   the employee list in a tablea form in that we  have our add or update employee page and that's   what we have worked on so far so in here we are  going to specify this um the parameter that we is   specified in this add or update so when you have a  look here let me show you when you check this add   or update employee all the properties that have  this parameter set up um to initialize it is what   you're going to provide you're going to provide  all the parameter or parameters to this component   right so we need to provide this and also when you  come down here we also have this parameter is over   here for Save form we also have this parameter  in here for um handle count or country selected   event for City selected event for um J Department  selected and for Department selected event so we   have to handle all this so we have about 10 or  more um parameters that we need to specify to   this component right so let's go to this employee  again and now in here we are going to have this   property specified so I'm going to remove this  this one and I'm going to specify all this so if   you want to do that you see as soon as I click on  space I have all these properties you're going to   do it one after the another to you order to skip  time I'm going to paste this in here these are all   the property that we have but the values that you  set in here we have not created them we are here   to do that so pause the video and try to specify  the employees going to specify it here show or   update employee we're going to create it in here  we have um mod ify parent or notify parent form   close collect do you remember all these country  City towns J Department Department branches you   know all this isn't it they coming from this add  or update employee component we have handle count   selected City selected U Department selected  brand selected Town selected and Etc okay so   all these are the ones that we need to specify  that's fine now when we come down here employees   as employee list do we have employee list in  here we are not providing employee list so we   have to create an employee to handle this let's  do it one after the another the first one is we   have to create a reference for this component so  this is a reference and we're going to copy this   and assign it in here let me make this aable let  me place it here and that's so this is solved all   right so from this employee we can make a copy of  this so let me just let's make a copy of this send   this a list I can change this to this as a list  that's a new version vers 12 we have you can now   use this an array as a new list all right now here  inste of an employee it's going to be an employee   take note because a single object and unless you  move the list this also solved right that's fine   now show or update employee it is soled already  because you have it in here we have the property   stated over here and that is show or update so  this also solve the next one is notify parent   change so let's also handle the notify parent  change and in case the user clicks on close   form we want to notify the user and notify the  parent and I'll call an event immediately okay   so here let's put the initialized form on top like  this let's leave one space and here we say notify   parent went form closes right so which form is  add or update form employee form right let's be   specific so in here let's put it so it's good to  I know um comment your code later on in case you   come back and want to modify it you know where  you're going right so comment are very important   so please do comment yours as I do mine okay so  we show page as through then the this for all   right then we call the load employees why are we  calling when the user finish adding a new employee   and click on a close form you want to call the  employee to load it again so we can retrieve the   data in there but maybe you can actually Advance  it because it could be that the user may not add   data but the user want to close the form and  I see they already created um employee in say   case do you have to load the uh employees again  no you don't by this in this situation is going   to load it so maybe you can actually sit down and  try to find a way to handle that but for now we   not going to do anything you want to load it as as  you closes the form fantastic okay this is solved   the next one is the country so we need to provide  default countries to this so with the countries   down here we're going to have access to them we  have the country City and on town right so you can   see using this over here the same gen Department  Department and a branch we have them also in here   so all these are solved we have um country solved  we have um default Department solved right so we   have these two guys also solved now the last one  here is we have to provide this selected baby you   be asking yourself why are you having so many  list in here let me take time to explain okay   now come closer come closer then listen you now we  have this form as soon as the page loads since we   having a cascaded drop- down list we don't want to  populate each list or each drop down with a data   no we want to only load the first one that is the  city not the city the countries and now we want   to also load the general department these are the  parent Department these are independent Department   independent models Or List they do not depend on  anyone as soon as the user select country we pick   the specific country selected ID we Loop through  the L that we have already and now get the cities   okay as soon as you also get the cities and the  user SEL the city we get a specific City ID and   now look through the towns and I select the towns  related to that specific city so we don't want to   get the selected country then be now going into  a database and I make an API call no soon as the   page loads get all the API calls and I'll cash  them we want to have application to be to work   faster so we don't want to have a slow application  so we want everything to be made available before   they just start to work on so select this the  data is already there you just have to go in   there and make a loop make some search select and  I'll display when select the data is already so   make this and I'll display no more API Co Etc  soon as the page load call the API all the API   get all the list once and for all we can now  move on I believe you love this explanation   is isn't it that's what we are doing so that's why  we have this selected Department selected branches   selected City and un selected Town these are the  list that you going to select and these are the   what you going to populate or going to provide to  this test box not the default one that you have in   here so take note you can see we have defa country  cities and our town the same thing applies to this   and in that you have selected department and now  selected branches seled cities and now selected   towns all right so these are the ones maybe you  be asking yourself why didn't I are selected   Department here we don't need to do that because  here soon select it we're going to have a method   invoked which going to select going to return  with the the integer the idea of that once you   have this list here we um Loop to this list we  get the specific selected ones and um put them   into the selected variables and I set it to the  motor or the component and then boom that is it   so let's see um let's create a single method and  that is known as um load default so what is this   load default as soon as you hear default what  comes to mind yes it means you're going to load   default an application or a call that you're  going to call anytime the application loads up   okay maybe this could also cause an issue later  on because anytime the the user tries to navigate   to that page and come back the pages method has  to call an API call has be made here we are just   getting data only so wouldn't be an appropriate  if you cash this so API call is made once we can   make another API call if and only this data  have been updated or deleted or a new data   has been added but for now we are not doing that  we can also optimize this application I leave up   to you you can actually do that yourself and I  believe you can do that thank you for releasing   me okay so we have to call this see we have  default countries cities and our town general   department department and our branches when this  page loads we want to call that and that's the   reason why we calling this method in here so  it's better that you copy this method before   you forget and now let's duplicate this pass this  in here remove the old one save it and that is all so the next question is how do you get  the selected data or the selected um general   department ID or the selected country from the  user we've invoked it already so you can just   create a single method and I'll look through the  laser we have in here and I'll make a sort just   going to pick it up and I'll cat it or put inside  the the selected element that we have so so to do   that I have them in here quickly I just have to  go in there and grab this and I place it and I   we can just quickly move on it is very simple  in here okay so this is going to be the select   W I hope you can see that isn't it don't worry  I'm going to push it like this so this will be   this will be that will be yes I believe this clear  and simple so see what we're doing we using this   Lambda expression we're not using this block block  block no we want to skipe that that's why it's at   moded so this is a new one let's use this okay  so handle City selected event or select event   you could see it is coming in with an integer then  we want to set selected c equal to default where   this using wear Clause means you want to get the  list so we have to convert it to two list when we   are done and assign to this city do same to the  um city that's to the town do same to the general   department that's here for the Department that  is getting the general Department ID and I'll do   same for the branch okay from this department ID  so that's what you're making a check in here so   this the the relationship that we created that's  the reason why we able to do this so you can see   we created a foreign key that is a primary key  of this general department which is representing   or representing the data or which is appearing  in the department data making as a reference or   joining these two tables together so we're going  to check if this ID is equal to the department   Properties or the columns ID or the record ID  which is equal to the ID that is coming in as   a general department ID gather all the record in  here convert to a list and I'll return it that   is what we are doing very simple one as well  okay so that's what we do we call this method   when the page loads and also we want to load this  employees separately because when the user decide   to add a new one and click on close form we want  to load this we don't want to put it to the load   default so that anytime that user close form all  this will be loaded no we want to actually want   application to be faster or fast enough and smart  as we are right so we want to um separate this so   we can call only this method anytime that we want  so when the page loads we want to call this we   have this even here already so we can remove um  this and I use this Lambda expression let's grab   this and when you check this method is in here  already so we need know to reference it anymore   so load employees that is the method that we are  creating let's save it so now let's check and   see what are some of the values that we haven't  provided that is a handle save employee so if I   click on Save what should happen we want to handle  that peacefully without having any issue with it   okay so we can do that by calling this one meod  down here and um where should we put it maybe here   will be okay no here show main page here will be  okay so let's say save employees so there is save   employee can see we handle it and it is coming  with this an employee um model then we're going to   call this access check as false defaultly we check  in here so this method is going to handle update   or add enough new employee isn't it so if it is  if the ID is greater than zero it means you want   to update it so call this method passing the the  base URL and now call this method to display right   so to display the message to the user like maybe  I'm user updated or um added process completed   and Etc we've done this already you and I created  this method earlier on so we can copy this method   again and now down here we can put this method  here since you're going to be using it often   we can put it in here okay so that's the method  you know you know this already isn't it yes you   know so let's see and that's what we're doing so  we we cash it in here and the result is going to   override this if it is true we want to clear the  content if it is false we don't want to clear the   content because maybe you want to change something  in there and have to H save it again we don't want   to be clearing content even when the pr is not  successful we want to remain it there so you   can actually modify it before you save it clear it  when only this is true that's fine let's save this   so as we are done with this one we can run this  application and then check it out so let's have a look okay so let's see now I reset everything  so you have the blank one let's click on ADD   employee now let's provide the name so I'm going  to use the same name that I use to net code H so tone number is going to to be just a  random number in here address going to be   let me just pass in AAR GH so S ID I don't know  what they're using it for so passing number F   number two passing something now let's choose  an image here this is going to be an employee   image so I'm going to choose my best friend  now click on next so in here let's have a   job title I'm going to will be U maybe as a  software developer that is a job title now   here I'm going to select General so that's an  IT department maybe management is okay then uh   Branch oh there's no Branch here we have not  created any branch and Country we have Ghana   City we have an Acra and and town so we have  all these towns in Acra can just select any   of them but I know if I click on this option if  I click on Save I'm going to have issue here so   let's recreate let's say a branch and there's  no Branch so let's add a branch here and this   this branch is going to be developers so it's  coming from management click on Save okay so   being saved let's go to the employees again  now choose here and let's refresh this so we   can make a sech so maybe you're not implementing  that as soon as you add unless the appload so we   can have all of these but if you want to um get  the whole data as far as you add any you can use   a container State container to also handle that  from various component okay so let's see from   the management we go to what again no no is  an employee okay so next code hop it's going   to automatically fill it for us and I said AAR  Ghana yes then let's choose my best friend as an   image and that is this one this guy click on next  what is the job title here is a developer so is software and is coming from the general department  of it some Department of management and a branch   as a developer country as Ghana city as AA and  I half town as maybe will be okay so optional   this optional so I'm going to say this optional  optional message here okay so click on Save and   let's wait and see okay so we have an alert  and this blank okay so nothing happen click   on it again there's an alert if I close this  and let's refresh the page and see if we're   going to have a then it means we have an issue  that we need to rectify then we see to it okay   so nothing display it means it is not saving  let's check from the source code in here where   we have the employee Razer now that is where we  handle the employee sa it is coming with this   employee and now we have this it's calling this  API right so this is an API that we have created   passing this employee and now the employee based  URI so let's see we have it as API employee and   when we check from the server two let's have a  look if we have the controller also created so   from the server this is a controller and now do  we have employees controller okay all right so   while this is working let's let's use something  let's check our solution Explorer let's check   the model and see if we we have any mistake in  there so from our employees um dto not the dto   itself that's the model itself we are inheriting  from this base entity and now this based entity   has properties of name and ID that's fine okay so  you can see when they come here we have this full   name and it's it seems like we are duplicating  that property in here so let's move it because   you're not going to provide any to wait and we  also add an attribute or required attribute on   top which going to give us a problem so once you  done this we have to perform migration so we can   um have this taken effect okay so let's actually  perform database migration um to that I believe   you know how to do it isn't it so pause the video  and also try to do it or you wait then we all do   it together which one do you want okay so let's  see so first of all we are going to build this project so after building this solution then we go  to package manager console and we are going to add migration okay so build suceeded now let's go   to package manager console and  in here we're going to say add migration so add migration and let's say update  employee table okay so once we have this we need   to set this to um server library and let's set  the server to Startup project you can see the   default it is a client so set this as startup then  we can now go ahead and UND do it so it's going   to run the modification that we've done to this by  removing the full name property from this employee   entity or employee model so can see we have  it that's dropped that now let's see so update database okay so this is done so let's run this up  again and see what we're going to do so you first   have to run the server but first let's set the  client to start a project then the server here   let's debug with de bargain so start it and while  this the server starts we can also start the the client so that is a server you  can see it is running and let's   wait for the client to run and  that is also the client so let's see let's add employee now let's see so first was  net code Hub then maybe the number is around here here okay so let's have an address  that is an aqu scanner I'm going to   choose the ID for now C12 maybe F12 for  the file number and also we choose an   image for this friend click on next then  we can now go in for job title that is software developer we can can choose the  department as it Department as management   and maybe developers country Ghana that's only  one I have as City AA and our town is optional   this going to be an optional message so sorry  I do not have anything to say anything to say   so click on Save and I let's we and see the the  output here see we have um process completed and   success operation right so click on okay now when  you click close this up you can see we have the   data in here so you can see this it's working and  any if you refresh this again we're going to see   the same data in here all right so our employee  is working and we can now add um employee the   next thing here going to talk about here is if  I want to update it if I want to edit it is it   possible yes let's actually have a buttons in  here to do it when you check this um department   and Department we see they have this buttons in  as an action you want to actually do same but you   know when you use um data grd for this employee  you could it has its own add buttons and also   update buttons and Etc right we want to make this  as much as um um simple as well so we can add that   it's a customized one that you're going to do so  we can add our own um image in here button so you   can click on and it going to affect the context  okay so let's have a look on that so let's close   this and let's go to the source so inside this  employee page let's have a look so that's the   employee page okay so when we come here we see  we have this are the columns we have this great   column and these are the various column that we  specified now down here this is what you want to   do let's add another one and now within this we  want to specify we're going to add just an icon   with this okay so this icon that we are adding  we have a method um shown here and that is a show   menu popup so we are passing in the context as an  employee and that's what we are staring from the   contest here as an employee okay we need to create  a method for um to handle this show many popup so   let's actually have a look on how to um work on  that so this is what you're going to do we want   to show we want to use as a context menu as soon  as we click on that you're going to use a dialog   bar to show menus that a user can select from okay  either um edit it update it delete it or even add   to Vacation add to um what is the next one add  Health add uh have I mentioned vacation already   okay sanctions and Etc okay so that exactly  what we're going to do here so once we have   this method let's define the method for this and  maybe down here we can I'll put it down here from   maybe this session will be okay load employee  this one is safe so aside from say what's the   next that we are doing we are going to load a  context so here there you go so let's say this   is um context menu oh why is the m okay so in here  we have this show show menu popup then we want to   select you see this method is coming with this um  object so we want to create the selected employee   then we can assign it to that so we can hold it  then context menu. open context menu where from   this guy we need to create a menu a context menu  for this quickly so we're going to create another   component and that is where we going to handle all  our menus in there okay so we go to solution then   have you seen the folder the other Pages folder  yes let's put it here if you open it you see I   have this let's open this let's add another razor  component and let's name this as context menu context menu now inside this context menu what  are we going to use here we want to have this   SF dialogue because you know it's going to be  a dialogue automatically now in here let me   open increase the screen size now can see when to  check close this up because we don't need close close Okay so close s that's right so when I check  this let me save this um close this and now open   it again so you can see everything clearly okay  you can see we using this SF dialogue now um   we have if it is open you want to call this open  context menu we have it bound visibility to this   is visible property now in that you see we have  this a content and it's a management menu or maybe   employee menu well we can make it as employee  menu I think this one will make it more meaningful   and here it is what view edit delete you see we  have um this at vacation overtime health and our   sanctions so we have this menu in here and this  means we are going to create separate modeles for   each okay so let's have a St the CSS St do you  have um specified here as Kea you want to have   this here and I believe you know this going to do  because it is the first time of me using this and   aside from that you're going to have this our  code session down here and now with this code   session we want to specify this let's create an  instance of this and normally in order to we can   make this as knowable so let's use this okay then  we set this visibility to force defaultly when   they appload it is force not going to be shown we  are going to invoke all these methods so what are   these methods the event that you've covered over  here you want to wire them up here so we can use   them in the parent component so this what we are  using if you take this clear this as well you can   see we have this parameter as handle view so if  I click on view you want to invoke it if I click   on edit do the same click on ADD um Health do  the same vacation do same for time do same s do   same and our health you do same so we're going to  retrieve all this method in the parent okay when   um you click from this chart component also we're  going to have two method in here and that is the   show and hide dialog component so open contest and  now close contest we C it as CH to get the current   state here affected to this page so we can either  render or you can be hidden okay so once you have   this we go to our employee in here now this we  need to make a reference to this in the parent   component um to uh make this work okay so let's  have it done so in order to do this we have to   create this contest menu top here or we can even  put it on top so we can it you confused right so   this is a this is a contest menu and now you put  it here contest menu you you got this context   menu so when you say context menu. open context  you know what it means isn't it that's fine okay   so now we have this set the next we're going to  do here is we need to make a reference to that   context menu and I'll specify all the method  that we did in the chart component so let's   go down here we are done with this out of update  so down here we're going to use this context menu   and that is a context menu we making a reference  to this context menu that we stated down there   aside from that we have this handle delate okay  so control KD handle delete this is what we call   delete click handle edit edit click handle view  view click handle health health clicked handle   overtime overtime clicked add s clicked handle  vacation vacation clicked all right so that's   what we actually doing in here so anytime that  you click on this we want to add this specific   user to the table because you know that with this  we have the data selected as soon as I click on   check take note as soon as I click on show popup  I get a current contest and I'll set it to this   sele so if I open that contest I still have this  property full of data that's the current contest   that we have talking about the employees I believe  you know what I'm doing isn't it that's fine so   let's handle the various um methods that we have  specified in here delete edit view add health and   Etc so down here we can start implementing each  and every one here okay so there's the default   one and now here let's start with it so first  of all we're going to handle edit clicked so if   I click on edit click what am I going to do here  let's wait for this to get loaded um I think it's   finishing some command let's wait now we going  to since we have this employee object used in   the form the add or update form we're going to  populate that employee object here and now when   we are done what you need to do here is hide the  main page and now show the add or update employee   page and I'm going to have all our data in there  so see check what you're doing now if I click on   this edit click you see we are as you can see  from it there an add or update employee now   this is coming from the instant that we created  here if I let me just minimize all these things   we done so when you check this you can see that  you have this add or update employee where is it   this one and we have you created a reference  out of it as the add or update employee so we   want to have this method has a property known  as employee we want to PO this right so that's   exactly what we are doing down here so when you  check this let me minimize this to okay so when   you check this one you can see that if I click on  edit click you can see this employee. ID we assign   to the selected ID right and we are doing same  until we get to the sver ID so this is a group   one check take noce a group one now we have to do  the same thing to group two so group two also has   job title and the other we assign to this selected  employee now when it go to the general department   remember that we created some properties know as  general department department and Branch if you   forgotten let me show you quickly so we can come  back again we we created this property down here   so have a look these are the properties that we  created J Department up to the town so we need to   say you you see initially they are all null so we  can set the properties to at with the current one   so you can see we are using selected employee.  branch. department. general department and when   you check you see name we did the same thing to  department. selected branch. department. name so   we are retrieving the name from the relationship  that we created according to the entities okay   then we can retrieve the department name we can  retrieve the department the general department   name and also the branch we do same thing to the  country and the city and the town and now we have   all set so when we are done we want to change  the title to update okay after change the title   then context menu. close we want to close the  contest menu that we have opened after closing   it then we want to click on show or add page to  through and I'll show main page to first so this   going to hide the main page and I'll show the add  or update page and I'll set the title to update   and we're going to have all our data in there  okay that's what we're going to do for the edit   now what of the next one so when you check this  model you can see when you check this this edit   here it is solved what Cas I click on delete and  also view clicked add to health um add over time   clicked add SS and also add vacation clicked let's  handle one after the another so the next one here   it is a delete so if I click on delete what can I  do or what is it going to do here that's an edit   clicked so down here I'm so going to have have  this um delete clicked so that is a delete click   we have been using this several times based on the  creating these objects um Department J Department   Branch City and also Town Etc we've done the same  thing so what you're doing here is as soon as I do   that the first thing is to close the context  menu then you want to um ask the person are   you sure you want to do this so you can see we  are confirmation you want to do this if false   returned but in case it is yes then br service.  delay by ID passing the selected ID in here from   the object that we have selected then passing  the URL to ask can see API employee to the API   and now if it is through then set this employee  to empty in this case it has been deleted so we   don't want to hold the data again you want to  clear that and also load the employees because   when you do that as soon as employee is deleted  it means one is off we have to load it and I'll   get a whole employee again that is what the delete  here it is doing very simple one now let's see the   next one and that is a view click so case I click  on view what can this do or what am I going to do   let's see so if I click on this view we set this  employee into this selected employee now with that   we have this context menu do close because you  have to close it so we can display the next one   then show Details page equal to through and I'll  show main page is equal to what forse and selected   emplo is equal to new so we clear the content now  we have a strange property here as show Details   page where from this it is a property that we  need to create and that's what we're going to   use to hide the details and also show the details  in the same parent component so let's have that um   property created and where can we even put this  so it don't get yourself confused I believe you   can put it beneath the context menu reference  from this area so here where is it context menu   contest menu contest menu where is it we have  the the reference made or state up here and I   think it is around here or maybe you can decide to  put everything there but I want to group them so   you don't get yourself confused when I'm loing to  when looking at this project okay so show Details   page set to for defaultly so as soon as I click  on view I want to set show detail Pages score   to through so maybe we can move it since it is  related to this view let's put this on top of the   view okay so we have this set here let me clear  this now this means that you're going to create   a detailed component very simple one okay so we  can just um create something simple for to handle this so do you know what you're going to do why  do you think we can create this component to I   believe I guess you're saying that from this  employee pages that's right you are correct   so let's create this component and we're going to  say this is an employee detail page so inside this   employee detail page I did not have time to um um  decorate this well okay so I was able to come up   to something small and maybe you can actually  Advance this since it's just a detail that's   going to display um information you can actually  do something um nicely over here let me take you   through what I did you see here is a container and  is a row it's a column lg12 as you know already we   have a card stated in here and the title here is  a detail and detail property that you're going   to come in name then we have detail so if it is a  net code next code Hub details if it's your name   your name details okay and when you come see you  have an image and that image is what you set it   to this so you have a class in here there is a  border and you have a style um set in this with   the height and Etc you can actually move all of  these to a CSS or a style class then you add it   in here but normally I will like in line okay  maybe let me put this to the next line okay so   that's what we're doing now when we check the  next one let me save this close this and I open   again so I can get rid of that black and white I  think I must have the writing now or still same   who still the same okay so when I check you can  see we have the image State up over here we have   it same card and you have this table table in  here you can see we have the table body TR so   we have the name the name here we have the title  title in there telephone telephone in there then   address address then we have the next one that's  for Department info and that's very simple too we   have the same table so TR we continue with the TR  and I have Department Department you have the same   the name in here so see we are making a reference  to the branch which has a reference to Department   which has a reference to the general department  do name we do same thing to the branch name and   on the not the department name and the branch  name okay that's what we're doing when we come   down here you have the same table down and this  for location info so see we making a grouping so   from the personal information from um maybe um  job information or Department information then   we have this personal information or the location  information we have country we have City we have   town then in case I click on the button like close  to the main what can I do so I call this method   also to get it close now we have this um stated  beautifully what we can do here is we going to   specify this event call back and our methods to  handle this as soon as the user close it up and   the user retrieve the data from the parent okay  so in this we can have this three parameters to   handle that now we have okay so I didn't not to  repeat this code again cuz it is already that is   one bad side of copying copying copying so you can  see from here that we have this show detailed page   and now when check the top here it is say if this  is true that is the only when this ma shown take   note okay so we're going to provide the value  to this from the parent then we have employee   employee details and the event call back to also  handle this okay so this event call back and I   need not to provide new here okay I did not see  it trust me so there's no we don't need to provide   new in here we are invoking the event call back  as handle details page close button click okay so   that's what we're doing let's go quickly go to  the main page in here you know today we have a   lot of work to do as what we did in the last video  so you know to waste them at all okay but you can   post the video take some take some rest and I come  back okay but for me I'm not tired yet okay so we   go to the employee page and now in here we have to  make a reference to this um component that we have   created so where we have this you can see we have  this contest manyu in here and aside from that see   we have add an update so maybe with the details  let's put it in the middle here as detailed component so maybe May here will be better for  us to get the the arrangement well because we   add then we can now show the details so we need  to provide this to the the property as an object   to this parameter also we have this parameter as  a Boolean expression that we need to specify this   then we have this event as handle page close  button click so in case I click on close from   the chart to the parent what am I supposed to  do or what should the parent do as soon as you   hear your child I'm crying crying crying what I  going to do def going to respond to it isn't it   good so let's also respond to this and we can do  that from this session so from the detail page   we can do that after the view so down here if  I see that or if the parent Hears A Clos event   has been called from the chart component then  quickly the details hide it and I show the main   page that is exctly what you're going to do  now that you have this set let's have a look   we can see we have all the three here set  let's go to the ad Health the overtime and   also the sanctions and click event and Etc but  for now we can just remove this okay so maybe   I just I don't want to remove everything because  you're going to be using it soon so I'm going to   copy this then I'm going to paste this here now  you know what I'm going to comment this because   definitely going to be using it soon then  I can now go ahead and I remove these guys okay all right so now let's save this  and now let's um run this application   and see the output that we or you and I we have right okay so the app is loaded but see we have  this AR here and I believe it is coming from um   the fact that you have not logged in because you  know we have created a new the new migration so   maybe let's log out and and try to log in again  and I'm sure user won't be found because there's   no data in there so let's create an account  here then let's use this net code okay so   there's a password one two three nice one click  on register account created then we can now sign in okay so log in successfully  now can see we have the the net   code we have accounts login and that error must be gone okay right all right so you can see it is  also gone as well now if I click on this see   what happen if I click on this you can see I have  this a Contex me I'm talking about or recreated   ourselves and if I click on this view see what  happens see I have this a view right this very   is not good at all I'm going to do this later  on um for the company itself but for now you   can mod you can leave this maybe you can modify  it yourself you have the department info you   have location info you have the personal info in  here the job title telephone number address and   Department info it management developer we have  the location as well if I click on this CL notify   the parent and I can see it is off click on it  again and if I click on edit what happen you   see I have the same info in here click on next  and let's see yeah I have the same data as you   see it now the department here I did not provide  Department you see the department is null Branch   two select Branch we did not we have only the job  title in here and we need to provide the city the   country and Etc this is a Ghana so you must have  it selected in there let's click on close and see   so um edit this we have the flowing it and our V  Department you have to get that so let's quickly   check the the code in here from this employee not  employee details you know from this add update   employee in here we check it if it is equal to  null then we have to set it and now who so you   see we have to pass in the name in here instead  of passing that you have to use this select   country and let's say um select Branch we have  to use this instead so this is what we have to   do right and also let's have a look Department  we have to do same to this department I think   we nearly forgot it but it's good that we've  seen seen it earlier okay so we have general   department is there already we have department and  is there branch is here we have location so from   country count is over here City must be around so  we have to pass in the city property as well okay   then the next one is Town so let's also gram  this and now let's paste this as time yes so   that is this one now when we save this let's try  to reload this application and let's see what we have okay so it is ready now if I click on let's  say go to details and click on edit we have this   okay so we are here we have everything click on  next and you have here you have it management   developers and you have everything set up in here  but if I click on um this Clos this and if I click   on add new see we have the same thing right so on  theose close button clicked we have to clear that   container we can actually do that and I believe  as for this you can do it isn't it so where are   you having a notify the parent let's search for  from this employee page where we have this notify   parent it is coming from show uh where is it  notify notify let's see okay so in here after   loading this maybe we can clear this container  also and let's say selected um employee is equal   to new okay so we do that and that's going to  clear that container off now when you click   on update let's see what going to happen so with  this you want to change the name maybe the first   one soft developer we from this previous this  is Fred right so maybe let's change to net code Hub then click on next we have the name set up in  already so if I click on Save yes you must select   this okay so you have to select before you select  this you must also choose from um this side and   we have only one so let's use from first one  here it is what PR pram so I'm going to use   test in here developer and you can set from the  it field set from management and now developer   and I click on maybe here let's say um modifi  click on Save and then let's see completed so   if I click on close you can see we have the data  in here being modified or specified as well and   if I click on ADD again you can see we have no  name right so this working okay so that is this   one now when you have a look you see we've done  the view edit and I'm delete no no not not delete   so let's see if I click on this delete this I  just want to do this I want to delete ASA yes   or click on okay and complete it and you can see  it is off so delate is also working let's have a   look with the next one then the last three that  we have is it three or four 1 2 three four here   vacation overtime health and now San if I click  on ADV vacation we going to have a testt box um   a dialog box which is going to display maybe  the day that the user want to the number of   days and and Etc right so let's have a look on  how to generate this based on theit requirement   that was given we're going to have to do same  according to the requirement given to us okay   so then let's go back to the source coding here  and remember when uh we got up here we have to   now uncheck this cuz we're going to work on the  three left and we can now remove this contest   menu here okay so we have this set let me put  it here a little bit okay so let's have a look   with the out health and the rest one so in down  here let's let's go to uh down here so there's   an edit and this edit is working this delete is  also working now let's see this is a view also   working so the next one that you're going to have  a look here it is that's a page close button down here so we going to create the various components  that we can be used to just display the popup in   so display the list of these various um option  that we have been given so in that we can do   that from um this other page now let's create  a folder in here and I have to stop everything   here because you know I can't rename the folder  if I do not stop it okay now stop now let's have   a look so you have to create let me close this  up close this now on this page we going to add   a new folder now the name is going to be um  Dr Pages based on the requirements supposed   to maybe Health Pages or so but yeah Dr p is what  was given so maybe we can actually have a look on   that now the next one they're going to create here  is we going to create a component dialogue so here   let's add this component dialogue and now this di  going to be a popup is going to displayed anytime   that the iser the administrator or the person  the manager want to add um vacation or health   issue related to a specific employee this going  to pop up okay so in that dialogue you're going   to have only few um is it columns or testbook  specified so here let's see what we're going to   do we have just a dialogue and you know we have  this add employees health here we are just only   adding you're not editing and you can see this  an doctor so here is a Mot that we're going to   create I like to save this and open this again  so I can have everything um CID not this black   and white okay so that is this so here before we  come to the see we have this the do time this is   the model that we created if I right click and  PE definition for this this has what it has um   date medical diagnose and recommendation so these  are the the thing the property that supposed to   now when you click on this other base click on PE  it has um ID civil ID and file name file number   and other but you know we're going to remove  all this because when we have all this related   to the specific employee in the database already  so we're going to do here is we're going to only   link the the employee ID to it so maybe later on  you can use a dto to collect all the information   and and display if they want us to do that okay  but for now we're going to do that so let's try   to modify this a little bit so we can um use it  in here let's go to the dto not the dto itself   the entities now from the entities you can see  we have this an other base entity we're going to   remove all these and now except only the ID that's  what we need and we remove remove this and we add   this employee ID so let's add employee ID here  so this is going to be the foreign key in here   right so you have emploee ID so when you check  each like the do model so if I check this doctor   model can see it has date medical diagnose and  a recommendation and it has the two properties   specified when you also check the other um model  which inherit from this other base entity you can   see um it has the same thing that you're going to  be using they all going to have this employee ID   as a foreign key reference U made to them so you  can see that's what you want to do you don't want   to um be using or repeating the same property a  couple of times in in this table okay you want to   make this simple and it should be also um nicely  designed okay so we have this it means as soon   as you made these changes definitely migration is  what is coming to your mind isn't it you're right   we have to um do it so let's save this and now  let's update this table so I'm going to say maybe   add migration and I'm going to say update tables  oh so it's wrong to see we selected a client and   that is a wrong thing that we've done so we're  going to have a it's going to build this but   it's going to have an error here so we have to  make the server or um a set project and we have   to set the default project to the data asset  layer that is a server Library let's wait for   this to get finished because you have nothing  to do then we move on and I do what um you're   supposed to do so even build field and that's  right rely that let's set the server through a   startup and here we choose the uh data access  so we're going to do same add migration update   tables and I'm just going to run it peacefully and  nicely then we're going to update it when it is done okay so build filed what's the reason  let's see let's build it ourself yeah I know   the reason because of this when you  check this um contest menu employee   page you know we have this okay so  control KC maybe we have to comment this let's do it again I believe it is not only this because  we have created a new page now and we need to   also Rectify that so this is what we're going  to do let's finish everything then we're going   to run or build this then you can run it and see  what it's actually doing so let's go to the once   you have this set let's go to the doctor's um  dialogue and that is the health dialogue so   Pages now go to this doctor dialogue and now  in here we have this that we need to specify   so from the code section we can just replace  it with this so when you check that you have   we have a title in here this we're going to make  this available uh maybe if you decide we want to   update it then we can now change that we have the  doctor in here as a model and we have when it is   clicked we want to invoke this passing sending  this doctor entity and now when this is clicked   that is where you want to handle that defaultly  we said is visible to for now if I click on open   dialogue set this to through and I C state has  change we've been using this already so I think   you know what is going to do then change title  we're going to change the title for this okay   so let's say this this and um once you've done  here the next thing we going to do here is let's   go to the parent component and that's going  to be the employee page so employee page will   be here and now from this add Health we go down  there and now try to have definition for this add health so that is this one add health will be here  so if I click on ADD Health what am I supposed to   do that's add her click we call this method and  now doctor we call that employee ID is equal to   this selected employee ID remember as soon as I  click on shop up I have this selected ID assigned   to the employee or to the context so in that I'm  going to close a contest from the popup contest   and I'm going to show this doctor dialogue so we  have to make a reference to this doctor dialogue   so you have to make a reference to um this object  of the doct model so in that you can actually have   a look on it by setting it up on top so let's  go up in here or well we can decide to put it   on top since it is related to only this okay we  sign up in here and this a doctor dialogue so   control period we need to use it from this doctor  page so in order to do that you see we don't want   to include all the links in here so we go to the  import and I'm try to include all the various link   that we going to even create in future you're  going to put them in there so I'm going to have   all this let me just grab all this and in here you  can see we have the content pages and everything   we going to replace it with this you know we have  this sanction Pages we have um vacation pages and   overtime pages and now we have this um do pages  okay so this is what we've created we're going to   create other thread in here okay so let's um leave  them here before we have her him that again okay   now in the employee page we have when I check  down here let me just minimize this cuz you're   done with that okay so when you check down here  you can see that notify so cont test okay so we   have it this is a doctor dialogue okay so we have  this doctor dialogue and it is a dialog that we   just created this a doctor dialogue and I believe  this we've added already or we have to make a   reference to Dr dialog s so to make a reference it  means we have to use that component in this page   okay so in order to use that we just have to copy  this or you just have to copy the name of this do   dialogue in here because this is a component  so we can make a reference to that component   here where we have all these components so the  next one I like to put it here and that's going   to be the do dialogue because you want to use the  dialogue you want to pop the dialog up as soon as   we click on um add Health okay so in that you see  these are the parameters that we need to provide   doctor and also this save event if you check this  doctor dialog you see this we have two parameters   and that is what we are providing um to this Dr  dialog component or not the employee page we are   providing it in here okay maybe we can also but  I like to make it in a straight form like because   it's not actually match okay so we have this um  created as a reference that we can use to call the   method inside this component all right so that's  what we I think problem is solved now when you   check this minimize this when you check minimize  this to the context will say it is now sort yes so   it is sorted in here and this is going to be the  doctor dialogue we have it set okay so it saying   that the type of name space in here what's the  issue um could not be found are you missing the   directive yes we have it already so what is  the issue we have state in here don't worry   when we close this and open it again I believe  everything is going to be all right so from employees from our client and we have this  employees in here employee Pages now check   down here I think this supposed to be yeah so  it is solved now so that's what we're doing as   soon as you pop the the menu up we have this  selected to get a current contest aside from   that when you click on ADD Health you want to set  the employee ID to this Ed ID that's the employee   then we hide it and I open this dialog contest  so when you open it and try to save pass and   everything add the date and do a whole lot that  we supposed to do when to check here can see we   have just a date we have a medical diagnose and we  have the recommendation if I fill everything here   and I click on save that is submit button what  am I going to do that is the next thing to do   we're going to handle this from this employee  page so let me close all this yeah done with   them contest menu we done with this two employee  detail you're also done here user account you're   also done already authentication done login H  long time okay employee to you don't need the   modu now okay so um based we are done setting  up this and I add update to we done so we are   onto this employee page all right so we going to  work on how to handle handle the save method from   this dialogue so before that we're going to call  an API to handle this it means let's check if we   have created the apis or not do we have any  doctor we don't have we up to the department   so it means we have to create our controller  know we have to create our PO for vacation um   whole overtime um what's the next one do you  remember okay so um sunion vacation over time   and our health okay so let's quickly work on that  then we come to the UI and I'll um work on this too so let's create our doct repository and  you can do that to implementation since we   have this generic interface we all of them are  going to inherit from that so doct repository   and now inside this repo we're going to have  a class which going to inherit from this with   the appdb contest classes going to have access  to the database okay so in here we have it set   down already and now with this we going to have a  look on the first one that is a delete ID if want   to delay this what can I do we just have going  to return a general response and also I'm going   to set from the database doct table if it is found  deleted if it is not then return not found okay so   this is a private method that we created commit  is so the same and our success is also the same   private method let's have these methods displayed  down here the first one is going to return General   response which is sorry not found and also this  process completed as well okay so and the success   here is going to return this a process completed  which from the general response now this also the   same you know we have to put common ones together  and we have to um create class where you can use   it a whole lot of time do not repeat yourself all  the time okay so that is for the delete let's also   see if I want to get all we can call this method  to also get all um data in this doct test table   now the next one here that we're going to do is we  want to get by ID so to get by ID we can also use   just a single line using this Lambda expression  to get it let me put it in the L line like this   to make it very simple and clear for you okay so  get by ID and I will return it the next thing to   do here is to make an insert so if you want to  add a new this what we're going to do you can   as a doctor instant as a payload then we add it  and now commit and now return success what for   update also very simple you have to also get from  the database you map it then we can now assign or   assign the old ones to the new value coming in  and we can move on with it very simple one as   well okay so this what we doing we save it and I  return taxes that's what they we doing for this um   doct repository if you don't mind let's finish the  rest okay so we have the next one and maybe you're   going to have um overtime repository to to be  created let's finish all the repost in here before   we go to the UI so I click on the same thing  let's go to add new class and it's going to be the   overtime repo and you know we have to still inh  from the same thing and inject this appdb contest   for our database so we do same in here and that's  what we're doing interface from the generic type   we pass in the model it here we need to provide  some properties this some method in here and it's   the same okay so I'll just have to grab that and  I'll paste it delete because you're doing the same   just like here you need to change the table name  very simple one okay maybe later on we can just   um put all this this three method in one class  that we can call it and now um use it but for now   let's maintain this you want to you want to try as  much as possible to make the work very simple and   now clear to so we have to also get the same so  get all we can also get all data then um we have   also get by ID you can also return it using PR or  default to get by ID and that is this one and the   last one not the last we have um delete and insert  so the next one here it is an insert if you want   to add you do this to add it to the item from  this overtime table and if you want to update   it then you can now go ahead get it from database  map it or just um watch it once you get it then   make sure you map it to the current one that we  have return save it and I return sucess done okay   let's work on the next um repo we have the doctor  set we have whattime set we have vacation also   waiting for us and we're going to have our maybe  um sanctions too so let's have the vacation in here let's create the next rippo this going to be a class as well and I see  vacation repo now all this we've created the model   already if you've watched the previous video you  know what what we are doing okay we created this   modes already and that is the the requirement  from the company and we want we want to work   towards the requirement which has been given to  us so we have to do this and it is the same thing   okay so we want to delete it get from database  and now you're going to delete aside from that   you want to return the whole thing to the user  so you can display it in the table and we are   doing the same thing in here for this we want  to get by ID so we also doing the same thing by   getting using first or default to get by ID  as well now the next thing that we're doing   here is we want to insert it so insert and also  call the save to save changes to database and I   return success to the user as a general response  aside from that in case I want to update it then   you can now go ahead and also update this so  get it and I'll match it and set the current   value to what we have from the previous one and  I'll save it and in case you have any issue that   you want to return we can return error that is  if is not found not actually an error and also   we can also call this to save it and then do the  same thing as well we save that and the last one   that not the last one we also going to work  on sanction repository so from sanctions to   you know employee can be sanctioned right so you  must have a table to also handle that let's add and the same thing s repository whereby you need  to provide the same generic repository and and do this yes so they have the same just that here you  need to change the table name to sent instead of   the other tables that we have been using get  the list from the database in here this is a   list General response control period I think  we have to use this respon response reference   and also for this get by ID we can also um do  same and I'll get by ID as well from the next   line maybe get all get by ID this will work here  we also have insert it is the same as you know   and we have update it so the same yeah we're  going to match it based on the property that   this model has okay so we do that and at the  end of the day we are going to save this to   the database so we call this method to save it  to database and it a return not found and and   and that is all if it is found to um do that so  we have the same thing and um it is set okay so   if you're not finding this it is same thing that  we doing let me put on L line like this for you   to get it clear okay now when you check it you  can see we have types so each has type that we   supposed to specify when you check the is the  client Library check um this the entities you   can see we have overtime type we have um S Type  we have vacation type so we need to also create   repository for each of these types okay so let's  quickly um do that let's create the same um class   interface for this not the interface um this is  going to be overtime typey a class for this and   now it is the same thing that we are doing so  I need not to be explaining again okay so as as   you watch you able to get the understanding in  here so from delete that's where this to handle   the delete in here we handle the delete for get  all we handle the get all from this angle also   for get by ID we can also handle this get by  ID from this two get by ID okay now the next   one is we want to insert so this method going  to make it possible for insert to be made let's see okay so we have this insert in here and it's  going to insert it maybe return okay so we insert   it we check the name and now here this what you're  going to do this is going to make it as an update   so for update you're going to specify this as  an update in here now this meod we're going to   check if the name is not found or if the name is  already found there then what this what you're   going to do you want to return something to the  user so we can create all of this down here so   you can see we have check name it takes in the  name and I checking from the database if it is   found so let me just put this in next line if  the name is equal to this then return item is   not that is true in case it is found then going  to return false so that's what we using here if   it is for if it is now with are not found that is  it is not found you want to update it in case it   is there then not not this one this for the the  insert rather we check the name if it is false   it means it has already been added we want to  skip duplicate okay yeah so we have this set we   can close that now we have other two repositories  left we have the what do you think with the next   one we have the Sanson type repository also  so we have to also create same and let's also   um do same from the same folder then later on  you can decide to have a simple interface for   this repository to okay because we know we have  a single interface a generic interface for this   but for the rep we have individual repost so  maybe we can plan to have um you know instead   of us typing the whole thing you can decide to  make a single generic interface to handle that   then so we're going to have generic interface  and implementation all generics we're going to   have controllers to generic okay then it's going  to make this very simple as well maybe later on   the next project we're going to try our hands on  that too and see if it's going to work for us if   you can have all access to generics for the whole  um three um system that we need to add so we have   get all and you know what is going to do right so  this going to get all we have get by ID and it's   still going to do same get by ID ID to is going  to do same the next thing that we're doing here   is if I want to add you know what it means go and  add it that's for addition if I want to update it   is the same we want to update it just that here  we need to change the table name now we need to   specify the same method that we did in the other  one so we have to do same in here for checkup and   also for return access and in case there's an  error in there you want to do that okay so we   see this is the same thing that we are doing here  right it is the same thing that we are doing in   here so control k d let's save everything we have  one hole left that we need to create and we have   this what time type we have a sension type so we  have one left that is a vacation type so let's   also um have that created and that'll be the  end for this project P that we need to create   okay trust me we're going to to create any new  report again to that Kingdom cam okay so from this let's right click on the implementation  let's add a class to this and you know it's   a vacation type repository and you know what is  going to do already hope you know the drill right   you're going to make a copy of this then here you  have to just paste this then in here maybe let me   try to put this in the next line okay so in here  let's implement the interfaces um according to   this the the generic one that we have this is for  delete then the next one is going to be for get all and we have the next one get by ID so get by ID this going to return by ID we  have um insert it if I want to insert add a new   I can do this return if in case the name is found  already then um there is going to be an update so   we can also update this now this should be okay  so let's see yeah that is it this should be inside   the generic interface it shouldn't be outside so  take notes before we do any mistake okay so once   you're done with this we must have the the base  um private model that we have created or private   method that we have created and that is this one  okay so we've done this already so that's why I'm   not explaining this anymore now let's save this so  all our interfaces all our repositories have been   created that's I'm going to do here is you're  going to create a generic controller for each   okay so let's handle that too all right so let's  create the controllers in here so we can close   this implementation now when you go to controller  you're going to right click click and I add a new   controller for this and we're going to name this  as Doctor controller okay so in that you know we   inheriting from this I generic repository then  passing the the model as here and I'm passing   to the generic controller to that we have created  so this is the interface it needs T value and now   the controller also needs T value so you pass  in and that is all it's going to inherit from   all the the controller method the endpoint that we  have created in the generic so if I click on this   and go to to p definition you know this generic  controller has it's coming from this T value and   it has all delay single ID add the update and Etc  okay so we inheriting from weiting all the end   points into that let's just the next one we have  doctor we're going to have overtime controller   so we also need to include this so overtime  controller to and you're going to actually do   the same so see make a copy and paste then change  the models that is all we have the St controller   and we also going to change the model to St and  that would be your as well so sanction and that   is it you you see very simple one aside from that  let's go to the S the types so we have sanction   types we need to do that too so that is a sanction  types controller and can see we are changing to   this the S type model the same thing applies to  this and same interface that is inheriting from   we need to have the vacation controller and the  vacation type as well so we have the vacation and   that's the vacation controller you see we using  the same model let's have the vacation type as   well so controller then vacation type to we have  that now which one left that is going to be the   overtime type we have to include that controller  as as well so we go to the controller to add a new   controller as overtime type so when we check we  have the doctor we have overtime controller and   the type S and it type vacation and it type okay  so we have this controllers now when you run the   API you're going to have access to all of this  let's have a look but before that before it gets   run we have to raise out this in the program CS  far it's good that you've remembered me if not   we're going to have try to have access to that  okay so let's actually have them registered you   go to solution then in the program.cs from  the server section server project that's a program.cs so this is a c this is a server  so down here we are going to include this   here so we have the interface over  time over time over time type over   time type so each corespond with it  repository as you can see and that's   what we doing okay so this saves now let's  going to rerun this again because when you   try to have access to this you're going  to have an error hold this okay so let's see that's fine so you can see we have our own  end point in here now this is authentication so   I can just close this Branch City we know  this already country Department doctor is   here we have the next one you have no we have  overtime is here overtime type is here sanction   is here sanction type is here we have vacation  and vacation type is also here so you can see   we have for all endpoint that we can make a  call to this end point to retrieve data but   for now when you TR to get data you're going  to have an error because you have not run my   ation here to update the modification that  we made so we need to actually um do that all   right so now let's close this let's let's  close the server cuz we are done can just   right click and then close all tabs in here  and let's go back to the employee that's the client so for the client you go to the same  employee page and now in there when we click   on handle this save the um Health we're going  to call this endpoint and I'll save it in there   but before we do that we need to register this  the um there the endpoint route in the constant   class that you created in the helpers folder  from the server or from the server Library okay   so this has to all right so did I say server  no that's a client so you know we have this   constant class in the client and that's what we  using to hold all the URL so the out so we need   to specify that in there so go to the client and  can see we have from the client Library where we   have the service see we have a head PR folder  we have a file called constant that's where we   adding all our constant in here okay so we have  to include our constant that's the doctor base   overtime overtime type stion base sanction  type vacation based vacation type okay so we   have all the UR end points stored in here so now  let's go ahead and start using um this so let's   go to the employee page in here now where  we have the save and this going to happen   from ad Health okay so if I click on save this  are going to save this add Health um data to database so in here we are going to let's wait  for this command to finish we're going to save   the health Handler and now you see from Save  Health event we are the payload com in is an   item it's a doctor instance and in here we  set set the ID of it to theed item ID and   you can see from here we call this API endpoint  here okay so do service. insect you pass in the   constant. dobas URL we check the response  in here now we can check if it is true if   everything is working we want to cleck The  Container clect the doctor instance and also   um close this doctor dialog that we opening  okay now this do service where is it coming   from let's save this we have to go to the  input and I um register this Dr dialog in there so in here maybe you can just name it as  supplementary model so maybe what we have down   here we can say this are supplementary model  we have this overtime overtime type vacation   vacation Type S S type and we have doctor okay  these are we have Service attached to each and   that's the reason why we able to actually get  a service from this doctor type okay now we   done with the doctor now let's have a look with  the next one so when you check let's save this   this is going to be the next one in here we  have this the doctor and that's a health add   health and now we have the save Health to this  let's see when you check this model you can see   we have this overtime sanction and vacation  we have done the he so let's handle the two   the three left here but I think before we even  go into that we have to add the page now this   page going to allow us to display the whole  list of um employees okay so let's complete   it before you move to the next one I think  so now we go to the same other pages from the   do pages and now let's add a new component to  this doctor Page and we're going to name this   as doctor Page you know the first one is Doctor  dialogue so this is a page now this page what is   it going to do we're going to be using um this  um data grade and that's a simp data grade to   handle this and in that you want to actually  enable set Excel export PDF export and also   print you want to enable these features as well  okay so within that I want to actually have us   look let's have a look here with our the code  session first so we can actually work on the UI so from the code section this what uh  that we doing we're going to have this   SF grid and this SF grade it is coming  from using this do model we give it a   name as default grade let me close this  and open this again so you can see it well okay so we have this doct a model we have an  instance created we're going to provide a list of   doctors in here and now when the page initializes  you want to get the whole list of get heal from   the API then we are going to this is the method  get health calling this do service and getting   all from the API if I click on ADD button you want  to clear this container create instance new then   open this dialogue what does this open DI going  to do you could see we're going to call this do   dialog. opening which going to set is visible to  through and now apply State as St to open or to   pop up the dialogue so can see we are creating one  dialogue and this dialog is going to be used in   the homepage that's for the employee page and  the same dialog is going to be used in the uh   the or the other supplementary Pages such as the  doctor Page or the Health page the um employee not   employee we have the doctor we have the vacation  we have the sanction and Etc okay now if I click   on Save we want to get it here so we're going to  update it okay so click on Save then we going to   update this and if I click on edit click we want  to get this content to the current item coming   in here then open dialogue so because we're going  to provide this as a parameter to that component   so that's the reason why we assign it here and  defaultly automatically it's going to fill up   with the various properties specify in this model  inside the component that you're going to use and   here if I click on delete then you know we have  this item we want to as the person are you sure   you want to do this confirm if yes then remove  it from the API as you can see provide an ID   and I'll pass in Dr base URL and this what you're  doing display the message and I'll get the Whole   Health since a new one has been removed or added  we want to get the whole list again and that's   what that we are doing so this is also the two  back clicks here you can see is an Excel export   PDF export from the same Fusion okay so here if  the test is equal to excel export then you want   to export it if it a PDF you want to export  to PDF very simple one just one L of code is   going to handle that now let's include our U the  dialogue here because you're going to also be   using a dialogue to update it so the dialogue can  be here and provide the reference to this doctor   dialogue we have the doctor object in here and we  have the save operation as has been specified in   here as an update okay now let's have the UI we  must first have the style um created and this is   going to be a custom sty you know I've been  using this sty since and that is the K Star   as pointer maybe you can put this into the CSS  class or the app. CSS so you cannot be so you   want be duplicating this all the time but don't  worry I get it so let's here let's implement the   actual UI that we need okay so we set you you're  still going to use the state container to handle   the the opening and the close the height and and  the visibility of this so we say that is a health   information we use this as a card as you can see  a card header and within this we want to use the   cardboard we want to use this SF quit these are  the two used which has the search the SS sport   PDF and the print which going to be displayed on  top of the SF Grid or the data grade okay aside   from that we have the list in here as stated benit  we have the allow pagination or allow paging allow   sorting in our two bar and also can see we have  allow Excel export to through set the reference   to this and allow PDF export also through maybe  if this is too long I can just move to the next   line as you can see clearly yes so we have the  page settings page size is five initially so   maybe you can decide to increase it to the number  of page size you want and here if I click on any   of this this method is going to get fired so  we can now check and now execute what you want   and that's what we've done down there okay so for  print is also doing the same you know allow print   do you have allow print we see we have allow XLS  Sport and I have the print so as soon as I click   on print going to print it out for us we have  the various um properties specified find here   employee ID medical uh recommendation and now the  date we have action and we have this contest as   doctor and that's where we have this two icons  so we have the trash and our pencil for edit and   delete if I click on any this method must get  fired let's have a look on how to write this   method down here and you know if I click on edit  and I delete we have this method specified here   edit going to handle this delete this also going  to handle that okay so that's all this um page   is going to do we going to make a duplicate of  this and at a dialog a couple of times for the   vacation for the other ones to assigns and also  yeah vacation and sanction and overtime yes we're   going to have a copy of this and use them use  it for other three now let's save this and let's see okay so let's see now when you go to the  employee page you can see we are done with   this ad Health the next one is an add overtime CL  clicked so when it's clicked what you want to do   let's also handle that so when you go to down  here what we have this so this is save Health   add Health click and now save Health the next  one here it is ADD over time clicked we want to   set so we create an instance of this over time  and I'll reset the ID to this so as we did for   the ad Health we're doing the same thing in  here just that we set the model you change   the model to the the over time model okay then  you close it and I open this over time dialog   so this means you're going to also create the  same dialogue for this then the next one is we   also going to add vacation so maybe we have  vacation tool that we can add we can also do   the same in here then we have um vacation click  so that is an ad vacation click we also want to   that this is a sension as you can see so we have  to also include the vacation so we're going to   create separate component for each of these and  maybe that will be the end for I think uh this   project I'm sure yes okay so once you have this  we need to create an instance of this so first   let's first work on the overtime now the overtime  we have to create this for the overtime we need   to provide the list of overtime type because you  know we have to select we have a relationship in   there so we can actually just put them on top  here you know we have this overtime dialogue   and we have this overtime instance that have  been created you say overtime and that's why   we are providing the the employee ID to this  selected employee ID then we're going to close   the context here and we're going to show this  overtime dialogue so this is overtime dialog   but we haven't created any overtime dialogue yet  so quickly let's go in there and now create this dialogue so let's create a folder for this  and you know for organization I like to   create separate folder inside this other pages  so add a new folder with this and now let's stop this and let's rename this to overtime pages  okay so in that we going to create this dialog   component overtime dialogue let's also create  that so add a new component and it's going to   be over time dialogue so inside this you  know what we're going to do we also going   to specify the same code session as we did  so let me just um put them here for you you   know we have this these are parameter that we  are specifying let me close this and open it again so we have this are the parameter that we  need to specify a list of overtime types and also   we need to specify this overtime object as item  model in here we have event call back to return   this overtime instance as soon as it has been  invoked we set title to this and then visible to   force and now when it is save invoke this and now  open dialogue and what close dialogue and now when   the value changes because you're going to have a  drop down list of a type of overtime type we want   to use the overtime type ID assign it to the item  value here then change title we're going to change   title so this is what that we are doing here see  is very simple right let's have a look with the UI as you have basic knowledge for this what  we've done already is the same thing that I am   also doing here so if we check this using this  SF um dialogue and we have this title employee   over time this is an item model for this edit  for model in that when I click on submit or   save it's going to call this method then you can  see we have the ID specified and you know it's a   disabled timee so you cannot see you cannot edit  it we we have the input date to to select date   as start date we have end date then this is going  to give us the number of what days automatically   that's why can see they disabl so you need not  to write it it's going to subtract this from   that and then you're going to have the date in  here also we have this item type this for the   update and this for adding new one just that here  we have the selected item here okay so maybe we   can ask um put something here if this is not  null you want to use this or we can use that   maybe you can try that and see okay so if this is  not now we can do that but also this also going   to work okay you've done this already in the add  employee form so we use the same um ter operator   here and this also going to work but here you  need to duplicate the the component here twice   if you want to skip it you can use the other  other approach as well okay so that's all that   we are also doing in here we need to provide  overtime types as a list of this overtime type   and we do same in here okay so that's what we are  doing now let's go in there and I'll handle this   also inside this employee page so we need to as  usual as we added the reference of this we need   to also add the same thing to it isn't it so we  can have access to the dialogue as well so while   we have this dialogue doctor dialogue we can  also in clude this maybe this is too long so   let me put it in this line okay so I can see that  from here we have the reference overtime dialogue   we have the model as overtime we have the the  list of this type as overtime types then if I   click on Save I want to call this event okay  to get save now this event is returning an   object of what over time you can see return this  over time object okay so let's actually handle   that so we can just grab this we go to this um  overtime where we have the overtime save down here where you have this this is the add over  time so here on top of this we have this overtime   dialogue we've done already so you can see  we are calling this and now we can actually   um use it in here as an open dialogue right so  that's what we have in here and it is actually   working now when it comes to the save what is  going to do let's handle the save event so if I   click on save you know we did for the ad health  and now save health and now this is going to be   for the add over time and I'll save over time  okay so you can see I am grouping them so as   soon as you get a source code you can actually  um go through it a couple of times for you to   get a better understanding or even when you're  watching like this you can actually know what   we are doing okay so in here this is going to  be for Save overtime Handler now with the save   over time and like you see we we are accepting  as a payload then we uh assign the ID then we   call an end point here we save it and that is all  so here we make a save Here and Now from the list   page you're going to update it okay or we're going  to manage it there either an update or delete so   here we're going to make only savings okay this  is what we are doing you can now close this and   it's the same thing as I explained earlier on  from this save health I you know to um explain   this again I believe you guys are smart and you  understand what you're doing isn't it we clear   the container here weite this selected employee  we clear it as soon as you are done saving it   okay so that is this one now let's see the next  one that you need to do here is um we need to   display this content so you need to create this  page a page to display this and also we need to   actually add this overtime type so who is going  to add it maybe the manager or the administrator   can add that and we need to make it available for  that person to add the types of the overtime that   they want they did not specify an overtime for  me so I have to make it generic that they can   um add it to the database and anytime that they  want to change it they can going to be possible   for them to also change as well okay so in doing  so I have to come by by create the same dialogue   and on the page to handle that so we go to the  same um dialogue and I end there a very simple   one we're going to create the same overtime type  dialogue so here we're going to create over time   next component and overtime type dialog know this  a type now this type we have going to be a simple   one we have just our UI simple UI which has only  one input test as said overtime type name okay   and the type here is going to be the overtime  type so let me close this and I'll open it again so you see an overtime type and now down  here we need to actually specify the code so   we can invoke it and I'm saving to the parent  component where we going to um use this so we   have this overtime type and it's an event call  back we have title set to this and invisible to   force and now we can now save it as can see so we  could see we are invoking it in here we going to   return the type of what overtime type to this  main page okay now let's save this let's go to   the same component and in there we have to create  the overtime tab page which is going to display   the list the list of the overtime tab that the  user has now added so let's see I'm going to add   a new component and it will to be overtime type.  Razer now in that here we need to only use table   to handle this okay so from the UI we're going  to use table and here we have this a container   row column Ed 12 and card and here we have this  button here as well what unclick as open dialogue   that is when you want to add a new dialogue open  it you want to add a new overtime type so you open   dialogue then this is a table head you can see you  have an ID type and now the action if the types is   not now you're going to look through them provide  the value for each of the header and we have the   ID and the name if I click on any of this edit  and I'll delete I want to call this method and   passing the object here to edit it or to delete it  that's what that we are doing here cuz this very   simple isn't it very simple and that is it now  let's save this and I can close this and open it   again so I'll get rid of that white color as you  can see so overtime time dialogue you have this   and that is the page itself okay now let's have a  look with the the code itself so let me clear this   normally we have to have our CSS style as usual  you know you know this already we've been copying   this all the time so from the code session we can  just uh make it work using the following code here   so could see if I click on take note we creating  an instance of this overtime dialogue and as soon   as you create an instance it means you have to  include this component itself so we are going   to include the component here over time type you  make a reference to this reference then when it   is save you want to handle it by Saving this is  what you're going to save and now there is the   model the type that we're going to handle it this  type is an instance of this overtime type we set   title to add defaultly so we can actually update  it and now set to update anytime that we click   on edit now take note when the page loads we're  going to call all the type from the API and now   this is the type that we are calling we going  to call all the type di have been added aside   from that if you click on open dialogue we're  going to open the overtime type dialogue we do   that from the button top here open dialogue and  to add a new um overtime type I click on Save   you want to check if the ID is greater than one  no ID is greater than zero it means you want to   update if not then want to add so that's why we're  doing update and I'll add okay if it's successful   C the container get all the type because a new  type has been added and I'll change the type to   what the title to add if it is clicked we accept  the incoming payload and now um change the title   assign it to the object and I open the dialogue if  it's deleted then what you want to do confirm then   if it is for returned but in case it is through  C an API end point passing the ID of the item and   passing the base URL and um that is it it's going  to return the success of through and display as a   message to the user okay so that's what we are  doing in here very simple one as well you know   this what you've done this already so I believe  you know what this going to do isn't it yes okay   so that's all that we're going to do for this page  we can now save that so we are done with this over   type and now the overtime type dialogue as well  okay so the next thing that we're going to do here   is we going to create this one time page since  we have the dialogue we have the type dialogue   we need to also create a page so we can display  all the data from the employee to that component   okay so we have an overtime page and now inside  this overtime page this is going to have a list   of this uh we need to include all these codes from  this over time page because this what it's going   to do when it actually check the first one we have  this SF grd and you know we're going to use data   grade from s Fusion so we need to use um this  let me just clear this and open it again I hit   this black and white okay so we have we create an  instance of this overtime dialogue that we created   earlier on and um you know not to confuse you I  would like to bring it first so it will be here   because you have the reference this item mod that  we're going to specify and add overtime types this   is going to be the list of whattime types to this  so as soon as the user want to add the user has to   choose a list or item from this in the form of a  drop down list then this is saved so we have when   initializes get all types get over times from the  database from the API so we have the two methods   implementation down here okay then open dialogue  to open the dialogue then save it to receive the   item and I'm save it in here to all update it to  the API as you can see from this and we have if I   click on edit I want to edit it open the dialogue  and I click on delete confirm this then after that   we want to remove from the API and I return it  and I display this um default message that you   have been using this is to export it to PDF and  you know already because we've done earlier on   if the test is equal to this do that if equal to  this then also do that now let's have a look with   the UI so so with the UI you're going to have a  state you're going to create a variable to hold   a state here which going to be a Boolean through  or FAL to show and hide over time so for now we   haven't created that okay we're going to be a  container and then here can see we have manage   employee over time and you you see this just a  tool the same thing that we did from the SF grd   the same thing and we need to specify the various  columns in here as you can see let me put this so   when you have a look at the first one we can just  make copy and paste and now we can just move on   with this okay then you have a two bar as you know  and that's going to have access to the print the   Excel export and the PDF export and the search  as well there is a field name is an employee ID   you want to have the the type name and also you  want to have the start date end date the number   of days in here action going to have the edit  click and then the delete click as well okay so   if I click on edit it means I want to edit it if  I click on delete I want to delete it and it has   implementation down here edit is going to open a  dialogue and now delete is delete is going to give   you an an option that you you confirm it then you  want to delete it okay so here when we are done   let's save this go to the homepage and in here we  need to add the overtime page so overtime page and   that is all so we have this set let's save this  so you've seen what you've done you're going to   do same for the sing pages and going to do the  same for the vacation Pages as well so let's go to   the employee pages and now in here we have we're  going to work on the sanction and the vacation as   well so here from the sanction you need to make  a reference of the company that you're going to   create and Al so create an instance of this and  that's what you're going to assign the employee   ID to it after that from that component that  you're going to create there's going to be a   method known as open dialogue as you know already  we close the contest menu which has been opened   for us to select this sanction okay now once  you have this you can now save this let's go   to the page and now from the import we need  to undo this we have sent we have vation these   are the two pages that we need to create now  let's copy this so sanction Pages let's go to   the solution then from the other Pages we're going  to also right click add a new folder to this that   this is going to be um sanction Pages let's also  create one for the other Pages that's for vacation   pages to right click on this add new folder for  this and this is going to be application pages okay now for the sanction we're going to create a  dialogue for that sanction so create a component   and now going to be um sanction dialogue so for  this dialogue this what you need to do it is the   same thing that you've done earlier on let me just  close this then open it again you can see just a   SF dialogue and you're going to have an IT model  okay and you know here we have an employee ID we   have an occurring date then we have punishment  date and the punishment itself as a in test area   then you have the type select type for this um  sanction type then you know for update and also   for adding of New U type as can see from here we  can just make a new type in here by selecting this   and then if we updating this this going to hold  on the the default or the selected one okay now   when you go to the Source or the code itself  we have the the three parameters in here for   the object itself and now we have a list of types  then we have an event call back to return this to   the parent to save it and see we doing the same  thing check when the ID is less than equal to   zero it means type is not selected in case it  is not then invoke it open dialogue here show   is and I close it is show to force and now um do  that now here un value clicked that is if I click   on if I want to select from the drop down we we  want to assign the ID here to the object or the   value coming from this we convert it into string  and as you know this already that's what we are   doing okay so this is the uh sanction dialogue we  need to also create the sanction type dialogue and   this also going to handle for adding of sanction  types only so we can get them displayed as a list   in here so from the sanction Pages let's also  add another component and this is going to be   the sanction type dialogue what is going to do is  just SF dialogue it has the Modo type of what Sans   type it is bound to only an input test box only  one as a S Type name then when it come down here   you can see we have two parameters event call back  andion type as an instant and now in here we are   invoking as soon as we click on Save which coming  from this edit form save we are invoking this to   in here and we check if it is not now meaning  user has provided the data then we call this   endpoint not the Endo we invoke it and and now  this going to be change the title as well so you   can see this also very simple simple as well okay  now let's create the various pages to display the   the list that we have for the sanction and also  the the sanction type so for the sanction type   page we can just add it to the same folder for the  sent and now in here sent type page so it is just   a table that we are displaying and now we going  to set state to show sanction type if this is to   through meaning you want to display this open  dialogue is the same thing as you know you're   going to open dialog to add a new one we have ID  type and our action so we can update and delete   and that's exactly what we are doing in here  let me save this let me close this and open it again okay and now here we have an edit and  I'll delete okay so we looking through this   types as you know and now when you come down  here we having this S Type dialogue in here   and make a reference to this we have the save  in here you have the sension type that we need   to provide that is for the dialogue now down  here we have the dialog instance created so we   can have access to the method in this component  okay so when the page initializes get all types   and this the type that is getting from an  API stion types so you can display it in   the drop- down list not the drop down list you  can display it inside this table okay because   this is the type that you have created now if  I click on save you want to actually save this   you check if the ID is greater than zero it  means update and I'm here add it to the new   database add it to the new table and if this  is Success then CLI the container get all types   again and I'll set the title to add if edit is  Click then change the title and also display   the dialogue if delete is Click confirm and as  you know it is your same then delete it return   call this method to display the response using  the dialog service from s fusion and now that   is it now now let's have a look the next one  that's going to be the sanction page itself   which going to have access to the the data  grd and going to also support print and also   um excise Sport and PDF as well so here we're  going to add this here so add a new component   to this and that's going to be a sanction  page here so we're going to have sanction page to this folder so this is going to be  s page and now we are using this SF grid as   you can see from this let me close this and open  this again so using this SF grid which have the   same tool that we specified earlier on I hope you  know what we doing here just all you need to do   here is provide the stanion as a data source and  then you need to specify the properties for each   of these okay and that is it that's all thing  that we doing for this we make an edit and it   is the same okay so we call this the sanction  dialogue so as soon as you click on edit this   stion dialog can pop up we create a reference  then you provide the sing types in here so for   for us to get a sanction types you know we have  to call an API endpoint and that's exactly what   we are doing here so call the sanction type  in here from an API endpoint then return it   get sessions also from the same API end point and  also return it as well okay we create an instance   of this s dialogue then we can have access to um  submitted in this like open dialogue because you   want to open dialogue from this Sans dialogue  so we can open the dialogue in here then if I   click on save you know the payload that is  coming out from the the dialogue we call an   API as an update because the pay is going to  actually help us to only update we add it from   the employee page then we update it from the  same or from its own page okay then we do that   and now when I if I click on edit we do same  delay two we also going to um do same in here   and I believe you know what you're doing it with  this isn't it because we've been doing it a whole   couple of times so we know what exactly what  it's going to do we have the same thing xort   and our PDFs sport we have it set in here as well  okay now once you're done with this we go to the   homepage and now once we have this doctor Page  overtime page we have to add this sanction page too and now here we have to add a stion type page okay so let's save this now let's go to  the employee page so when you go to this   employee page where is it employee employee  employee let's let's have a look so that's   the employee page now here we have this s  dialogue that we need to make a reference   here so where can we make the reference we  can put it down here where we have this SC   this side we have to put the reference to make  that reference in there so let's see how to add that so for that we need to specify the Sanson  dialogue in there maybe it is too long let me   minimize it so we have this sanction dialogue  and we creating a reference of this we have   this it mod assension and now the type that  is the list that we need you also providing   the list in here then when it is saved it's  click you want to handle the save in here to   this employee list and let me actually leave a  space between and that's exactly what we've done   here so you can see if I click on stion dialogue  what is it this is the overtime save over time   and that the sanction dialogue so you can see we  have it set in here then there's an add sanction   click from the context menu we open it and as  soon as I click on Save what should happen you   want to happen you want to handle the save  option in here right so let's have it done here so here we can just insert into database  you know we ACC calling this database from this s   Service endpoint then we have to call the response  to display the message to the user and that is all   you see this is a payload that is coming from the  invoke method in here from this dialogue okay so   we have it set in here and that is all we close  your dialogue when we are done all right so that   is for Save the next one here is on the vacation  so we have to create vacation vacation page then   vacation um dialogue you need to create vacation  type dialogue and the vacation type page then   we call it a day all right so let's also handle  that as well but I wonder why this has the same   Red Line maybe we can just close this and let's  try to open it again and see if we have the same issue so yes so that is it we have it it is gone  over type it is gone then s is also gone so we   have this set up here okay so that a save sanction  now let's handle the next one vacation so we have   this and now if I click on Save vacation what do I  want to do you can actually add the method in here   then we go in there to create the component  so we have the vacation so say vacation here   it is going to com in as a pad of an item of  vacation then we set the employee ID we call   the vacation service insert then we display the  response here and I clear the container in here   okay so we need to also create the component  for this maybe we can reference the component   in here before we try to um create it okay so  let's see what we can do let's reference the component so we're going to add that one to this  component all these are going to be the dialog   as you can see these are all dialogues which  are going to pop up as soon as we click on the   context menu now in this we can have access to  this we have a vacation dialogue and making a   reference to this vacation dialogue in here  we have the item mod specified this vacation   type and how the handle that if I click on save  so we need to create this dialog here quick you   go to the same process we go to the vacation um  folder and we're going to create the dialog in there so that is this vacation dialogue we can um  create the component in here can just save this   close this component and I open the component  again okay so the same thing that we are doing   that is a dialogue that we creating we need the  employee ID we need a start date the number of   days and on the end date okay we need the type  so when you check this model the vacation model   these are the model that were specified we created  earlier on in the first or the second video so we   have that and this is the type that we need to  also specified for update and also for adding   of new entry so we have it setting here what  we did here is to change the data source you   know to Vacation type and our vacation types as  well okay so that's all that we are doing very   simple one it is the same as we've done already  and now we have three parameter that we need to   specified for vacation types and also for item  model and for Save event as well we do same if   everything is working we invoke it to the um  parent then open and un close dialogue get a   value of and assign it to this anytime the drop  down value changes you want to assign to this   vacation type ID okay let's save this and the  next thing you need to do here is you're going   to create the vacation type dialogue itself  so we can keep adding the type itself then   that type going to make a reference or going  to be referred into the vacation page um or   vacation dialog when creating the vacation for  a specific employee okay so we do that in here   and that's the vacation type dialogue it needs  only one property as a name okay and the type   here is the vacation type now if it is clicked  we want to invoke it in here to the vacation   type to save it to the parent and that's exactly  what we are doing so when you check the vacation   page you're going to do that in there all right  so you need to provide vacation type to this as   a parameter and also you're going to handle this  as a parameter from the parent component all right   so that's what we are doing very simple one and as  usual you know this already now the next thing I'm   going to do here is we have the types already so  we need to create individual Pages for each for   the vacation page and also the vacation type page  we need to also do that all right so let's create   the vacation um dialog page and that's a vacation  um type dialog page which is going to handle the   list of the vacation types okay so in here it is  the same we have a table that you can see from   this now inside the table we have this button as  on click to add a new we have the various table   header that's as you can see from here then this  is the type of list we are going to Loop through   and now set in here we also have this uh TD as an  edit click and also delete click which going to   be handled down here okay so that's exctly where  we doing the same thing now when you come to the   down here we have the dialog box which going  to be used as soon as I click on add new um type and you know um we have properties such  as we have to get the reference of it we want   to handle the save type and also want to handle  the vacation type as well so this is going to be   an instance of vacation type that we're going to  pass in there to hold the value of the model for   us in here we're going to retrieve it and as you  can see we call this get types to get all the type   service and um vacation types we open that in  case I click on add new then when save you want   to check if it is greater than zero that's an  ID you want to update it else you're going to   add it you call the service then we can now call  it and use it here the response here we check if   it is through we want to cleck The Container get  all types again then change the title to add and   if it is edit then um change the title and also  set the item object come in here as a pillow to   what you have in here the content and it's going  to set to the dialog content or dialog component   aside from that that's a delate um delate here  we're going to call an API first we confirm call   an API if it is true then passing the URL and  it's going to delete it after that get the whole   types again and you're going to have the current  or updated content all right so just going to   display the message using the dialog service from  Sing fusion and then that is all okay so the last   one here is going to be the vacation page and on  this vacation page going to also handle all the   vacation list of an employee and then in that you  can um export PDF EXC so print it out let's have   a look on how to work on that as well so we add  a new component we name it as vacation page and   now we see we have this state um container we  having this show vacation if is only through we   want to display the following content in  here let me close this and open it again yeah so in here you can see we have an SF grade  with the same to specify as you be seeing we have   it on top and in here it is the same thing as  we seen just all we did here is to change the   type vcation change the the list data source and  also specifying the column types you see we have   location we have start date end date number of  days and we have the the edit click and also the   delete click so in case I want to edit in case I  want to delete it I call this method and passing   the Modo in here when it come to down here we  have the D component displayed here such that   you can actually update it and you know we  have the SF grade instance created we have   the vacation dialog also instance created so  we can have access to the method inside this   dial component we also have the instance of this  vacation model which has an item model and that's   what you are passing it through this as a a value  then also we have the list of vacation to display   it and we have a list of vation types so that we  can supply it to the vacation dialogue so as soon   as we can see here we can make a select from  um from this okay so we get the types we get   vcation and the two methods are going to work on  that aside from that here we open a dialogue in   case I want to add a new one in case you want  to save it from the dialogue then we're going   to call this method we um we're going to update  it from data to the database passing the vcation   base URL and now here from the response we  can now set this item to a new content if   the the operation was access okay so that is for  edit clicked then I'm open a dialogue and I set   this model to the current item coming in delete  item confirm the person um that's confirmation   message I just want to do this if yes then you  want to delete it to the Endo then display the   message get the vacation list again so you can  have all the list in there and I just going to   display the message using the alert all right so  here we're going to convert it to PDF and that's   Excel um export okay so we have this also done  let's go to the homepage and now um let's make a   reference with this so we have the overtime  we have sanction and you're going to have vacation vacation page we have this and also  when it come to the type you have a type as   well type page so you can see all the dialog  boxes are found as a chat component inside   the various pages so that's why we did not  include them here you're going to call them   from that parent page P all right so once you  have this let's see it seems everything is all   right when you go check the homepage let's see  what we can do from the employee page and now   in here we have this vacation um dialogue we  have we've made a reference here and that is   a model coming in here so this means when it  come down here we have to specify it on top   of the vacation we have to handle that on  here we have the save Health there is the   add overtime click and as a save over time we  have ADD sanction click and a save sanction   clicked there's an advocation so on top here  we need to also specify the reference of this component so on top here let's specify  the property in here so see we have the   component we have the instance and we have the  the instance of the vacation model and in here   we can call check if notable as well all right  so everything is is in order and I think every   everything is okay so we have each has the  ad and also it has the sa occas Handler as   well all right so once you have this uh we can  check let's go to the state container that is   from the All State and in there we're going to  add you see here is going to display department   is going to display the branch and accordingly  it's going to display them as you can see from   here we want to actually also add the the  supplementary tables vacation vacation type   and also all the other um various um component  that we have created you want to add them here as well all right so let's say this is going to be  the doctor table that's going to be the health   one you can see we set all to um Force then here  we are going to set only the show Health through   that's for the doctor this for overtime and in  that we also going to do same so over time you   show this you set the rest you force and we're  going to have this overtime type as well so we   also have to show the overtime type and as you  can see overtime type is set to through we set   the rest to force then the next one is the  sanction table so for the sanction we also   going to do same with it we set the same thing to  true and the rest is set to false now the sanction   type two we're going to also um implement the  same thing in there so according to each we   going to set um to true we first set off to false  then we set the specific the current one to true   that's what we want now when you have the we have  vacation and the vacation type also um left that   we need to actually add so vacation and a vacation  type that's actually we have to add both here okay   now the next here is we that is a reset we have to  add all the property that we've created you have   to all them I have to add all of them and we have  to set them to four Force um defaultly so they set   to force as soon as you call this method going  to set all to force then it's going to stand up   stand this up okay yes so are going to be Li  down there going to stand stand only this up   that's what we're going to do okay so we have this  mod this are container State container created and   injected and now we we are good to go okay I think  everything is set is that so okay let's give it   a try let's try to run this application and then  let's see what else we can do but first of all I   want us to build this and let's see if oh we have  not let's for perform database migration because   we have some migration to be made so we can um  make modification based on the tables that we modified okay so we have an issue here sanction  type does not contain sanction type ID so let's   say it it's coming from the sanction dialogue  let's have a look um okay so if item S Type ID   so let's see S Type ID now this s and what does it  contain you see we have this employee ID we have   stion type okay so we need to also add it means  this an an error that we need to fix it up let's   check the sanction type now we have the list of  sanctions so we want to go to the sanctions here   for the relationship that is a minut to one you  must have sanction type ID and this going to be um sunction type ID yes what else again let's see I think um that is all  now let's try to build it again okay so five succeeded everything is working   now let's perform the migration  so I'm going to clear then add Migration by we make sure that  the server is being selected   as a default so let's select that and  the server library is selected so add- migration then you say update all yeah so there is done let's  update the database so update dat Das database okay so there is still  running now let's wait and see okay so this is done all the changes  have been made and now let's see so let's   try to check it up you have silver ID what  time okay all removed yeah that's fine so   let's now run the server so we set a client  to the start project let's run the server here then we run the the client so let's run the client so  whilst you're running it let's see   we did not specify the drop downs that is the  content here in the nav bar so when you check   the layout the um nav menu it doesn't  have this right so let's let's include this this nap so that we can have access to um  the the the types vacation types to add vacation   types also to add the doctor not the doctor  in our part to have vacation to add sent and   the overtime so we have to add that now let's  wait and see it first then we work on that all   right so we have an error here let's check it up  and see so there's no registered service for the   type um service contract interface okay so let's  I think I have I've seen it okay let's go to the   progr Cs file from the client okay now let's  let check it up and see do we have a country   City Town employee no we don't have any of them  so we have to add this so let's add the overtime   with the type vacation type sanction type and add  the doctor I think this is what we need to do also   let's quickly check the the navigation that is the  nav bar so solution there's a nav bar in here so   for this Navar we are going to Let's comment this  maybe we don't want to include this here we can   do it other somewhere else we have just the home  button displayed in here and at this we have to include let's say this we have to include the  authorize yes authorization and I think you can   have that link in here let's go to the pro not  the program let's go to the import and then in   here we can include this so it is microsoft. call  do authorization so that is this one and it's   going to make this um KN it's going to make this  work okay so we have the home we have the button   on top and that's going to be the home button  okay on top in there now here it is for only   admin that is for the user so Administration you  know is to manage user so that's where user can   change the role can delete the account okay it  is for only only user this means that only user   can have access to this and that's what we did in  the I think previous video what we're going to do   here is to add just an authorized View and I'll  include the row here and also that is it so with   this we have the margin top and that is exactly  the same okay just that when you come here you   can see from this down we have this also included  this are the country City we done this already we   have we just make a copy of this then we change  this to overtime click sanction type and also the   vacation type okay so I added these three list  in here then I added the method here and when   you check down here we have the same method and  that's what we are invoking from this oate the   state container that we created so you can see.  vacation type clicked as you specified earlier on   then also we invoke any of them as well okay so  we can hide and show um them based on which one   that we click all right so that is it that we  need to also do now let's run this application   and let's check it out okay so the app is now  ready now let me open h y l let's see so that's   Administration so see we have the home button  here we have Administration and in here we can   have access to the users and here it is for  only the admin can do that let's see so admin   can add and now change the row and also for the  management you see we have all this in here for   the Department we have for locations and so we  have the types W so check here you have what time   type and Etc so can see um we don't want to work  time section and Etc let's remove all the types   or we can shift this to um this a little bit we  can actually do that modification in there right   so in here what we have that is coming from which  one there's an admin aside from that we have this   stop margin and um let's see which one that we are  talking about this is enough okay and if I click   on this this page gets so here it is left is let's  make it as two okay so when you save this let's re again all right so the app is ready  and as you can see from this we have   everything here now with this we have this  users and we can now manage an add because   we an administrator let's log out here  now let's try to create an account and see so maybe this what you're going to do next  uh maybe later on this feature that we can add   you're going to have only the login so we're  going to have a default login and um maybe you   have to create an account but before you create  an account even when you create an account the   admin must authenticate you before you can have  access to the login all right so it is not like   today that I create an account here and I  can just log in no we don't do that maybe   we can modify that in the near future but for  now let's stick to this so this is just a user   or just a manager and I'm going to say this is  going to be user one we have the password one   2 3 click on register okay so user one two I  think you need five more than five so account   created now let's log in user one okay so we  are log successfully and it's going to open   this for us now take note the first one since  we was an admin H I was able to see the user   you can see from you have only the home and  the management right have you seen so why is   it where is Administration it is off because I'm  not an administrator so I cannot have access with   that what I can do here is I can just manage  this ones in here I can go for the employee   that's what is shown defaultly I can check the  vacation um type and that's vacation type for   now nothing is added we can just add the new one  so vacation type let's add maybe this going to   be I don't know what kind of type down is a f  f and I'm going to say it's going to be added   in here but you see it has added twice let's see  click on delete this completed add the next one   if I type in half what going to happen Okay  so it has added as well we have half in here   now when you go to sent too let's say maybe do  we have premium in sent I want to say premium right okay so I have this um well so maybe  I can decide to delay this one each of this   premium maybe I can decide to sanction type  is um you can just say this absolute we can   just um save that and that's has been replaced  there when you go to the vacation type we have   overtime okay this is overtime type right so you  have full night and half night right so vacation   type you have this absolute and the vacation type  no the S Type vacation we can have uh there is a   holiday so this is holiday that you can go in  for for vacation all this your off day okay so   for upd to um we can actually handle that since  we press on the enter key that's the reason why   we have double of day so we have these ones and  now let's see if I decide to if I click on this   vacation I have to get the vacation we did not buy  that so we have to actually work on that as well   from this table and maybe the count of employee  that you have you can actually display them over   here as well right but here if I click on this  check if I click on this I'm going to have this   popup I can just click on view and I can view this  click on okay and I can click on this again can   click on edit and I can edit every stuff in here  as you can see I can edit this and I'll save it   again I can also close this now if I click on the  same thing again I can go to add vacation I have   this form that can add a vacation to it you can  see start date and as soon as I pass in the stat   maybe 2024 take note you can see default I'm going  to have the number count in here right so for this   end date okay so I'm going to add the number  of days that you want to for the vacation if   I say 10 days it's going automatically be added  to this if I click on this see have the 10 days   added so end date has automatically calculated  for you select the type and currently we have   no type is is that so maybe we've added a  type but you need to refresh this up let's see so it has been refreshed andless with data  is loaded click on this again so add vacation   now click on this vacation type no record  but are you not have vacation type in here   management vacation type you have two types  in here right vacation types and if I click   on that drop down a call is not made meaning that  we did not call this from the page loads we have   to check it up and and make a reference to it  in case um here we could not find that let's   see advocation type T type okay it is not there  let's have a look at the next one click on this   add over time and I SEL this we do not have  okay fine it means you haven't called them   let's say add sanctions type and also it is not  available so let's have a look on that quickly   and see what we can do to complete this project  so come to the employee page and now in here we   have to see we have have all of them instance  created as a list when to check this from the   ad Health from this um over Ty you see we have  the list created here but we did not call an API   to handle that so maybe on top here before  we have this add add issue we can um put it here so we see that with this we are calling  an end point to assign the list in here okay   so this is the first one that we call for the  uh sanctions we have overtime and we have the   vacation and then we have to call all this method  here inside the the page load event so when the   page um loads or when the page initializes we  want to call these three methods here let's   check the initialized async method and that is  this one so when the page loads we have to call   them here so we can have access to the list of  these various um um Properties or the models that   we have created let's refresh this page and see  all right so this let's Che it up so if I click   on this and if I click on ADD vacation I'm going  to have the form here so there is a 2023 let's   say this is 2024 this year and I want to spend 10  days so maybe 10 days will be okay I'm going to   have it set now the type here I have you can  see how this is a Hol this the of so this is   holiday click on Save and now this is going to  save to the database all right so we have this   let's also add one to the overtime maybe you  work over time is this your ID and at the date   here is 2024 2024 and I could see so choose the  end date so um this4 and now by instead of this   day it is around um 10th okay so 270 days days  or maybe this could be 01 and this could be 10th   in here we have nine days okay so select the type  this is full time so full night click on Save and   then this has now saved now click on go to the  next one and add Health maybe have you visited   the hospital recently yes what's the date 2024  or you can click on this s the data as well and   now what's the medical condition maybe I'm sick  and let's say maybe rest so that rest click on   Save and now this also saved all right so the  last one here is what add sanction so what is   the sanction date you have the occurring date is  2024 January maybe um punishment date actually   it's going to be 20242 and this time is going  to be um going to come to work on February then   what is the punishment date maybe um um less  well let me say fight then the type is going   to be an absolute so click on Save and you can  see get saved all right now but you not seeing   anything here if I click on employee vacation  over time and doctor I must have access to this   and I must even have the count of the various um  employees which have been added to um this all   right now let's see let's see how to handle this  as well so let's go to the list go to the source   code and now where you have the other Pages the  other Pages folder you can see that we have table   Banner we want to handle this in here so in here  when the page loads we want to let's have the code section okay so from the code section  we want to have a list now within the   list when the page loads we want to  subscribe to this okay so you want   to subscribe then call this default method  what is it going to do this method is going to load all the so you can see we get all the  data in here then we can now count them and   now display in there very simple so anytime they  pay loads we're going to call this once and it's   going to work also the next one here is we want  to navigate between hide and show so with that   we have to implement this so if health check is  called then I want to show this and I just going   to set this to through as you did in the state  container okay when the page is um dying up we   have to um unsubscribe to this action that  we've done with the dispose method okay so   in here the next we're going to do is we have to  specify the count of these items inside this so   you know we going to use from when you check  the department this is a department so with   this department we are going to add then get  a account of the department and I'll assign it   to this so maybe let me put your next line then  in here you're going to have it as a badge then   department. count very simple one we going to  do same thing to the sanctions too you want to   C the SS as the page loads up you want to count Ag  and on display Also let's have the Heth the heal count so that is a health see here okay so  inste of the doctor maybe you can change   this to health then let's add the count  here also for the overtime to let's use see there's an overtime we get get account and   our display then we can also  have access to the vacation as well okay so the vacation count now the last  one here is going to be the employee if I   want to count the employee let's count it and  display it in a badge form as you've done for   the address okay now if I click let's have left  Y is to The Click so that's the vacation if this   vacation is clicked I want to let's use this  um the card if I click on this I want to call   this method if I click on overtime I want to  display the overtime um component okay and I   if I click on health I want to display the  health component so I can have the list of   employees which have been added to the Health  factor and also the next one is the sanctions   I want to also open the sanctions table and now  within this table I can make a search I can also   print it out export to Excel and our PDF as well  okay so that is it department and for employees   you're not going to do that because you have the  table Linked In already let's refresh this and see okay so when they upload this is what we have  in here see we have employee one data that's what   you see over here vacation overtime health and  everything we have 111 right if I click on over   time it's going to display manage employees  vacation that's vacation and in that you see   I can export to excel to PDF and I can print  it out let's I can also make an edit so this   is a start this and end a number of date I can  also make an edit in here and it's also support   pagination as you can see in here as well okay now  if I click on Excel export you can see exported to   X as you can see export 3 if I click on PDF it  is the same to PDF as you can see to PDF and if   I click on print to let's see I can also print  this out I hope you can see that I can also um   make this print available using this infusion um  data grid this is available and easy to implement   as well okay so it is loading the preview maybe  we can wait for this preview to be loaded then   we can print this out as well so this is a this  is available and as you can see we have um this   set okay so when you check this employee we did  not include the print and now the the the Excel   export and Etc right we did not so we can do that  in a in a simple way as you've done to the others   we can also do that let's have a look on how  to work on that so on top of the employee page   let's navigate to this employee page now where  we have have this on top of the SF grid maybe   on top here we can specify the the tools right  so maybe let's specify the tools here say set   Excel export PDF export and now print and in that  we need to specify pagination allow sorting and   also all the a whole lot right so let's specify  this properties here as well okay so maybe I'll   put this the last line and that is it so once you  have this set you see we allowing um XL export to   through allow PDF export also through now when  you come down here we have to make a reference   to this SF grid so go down to the code section  and on here let's have this SF grid where you're   passing the employee model and in that we can  specify the method here for the print and also the   Excel export and Etc you can do that very simple  way so down there let's go and do that magic in here or maybe you can put it here okay so we have this set and that is  all so let's save this too and now let's   r again now let's see that we're going to  have these features on top of our SF data grade all right so you can see we have this ex uh  Excel export PDF and also print and it's the same   thing as you've seen from the vacation uh you  can also make the same print from the overtime   too you can also do same right from the health  we have also same and from the stions to we have   the same you can make a search from here pation  is also available and as you can see you can do   any of these as well so that's what we need to um  do for this and I think this project is scalable   meaning you can and add more you can add more  features and it is also um you can modify this   okay it's open for modification so only that  you can grab the source code you can actually   go through it and also modify to see what you want  but this what we've built so far for this uh video   and for this project all right so that is it thank  you so much for watching this if you want to get   a source code check the video description  going to catch you up in the next video

Channel: Netcode-Hub

Views: 3,156

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

Id: NLfG4TbN2cI

Length: 192min 19sec (11539 seconds)

Published: Sun Jan 07 2024