Ticket Tool App in Angular | Mini Project with API | Angular 17 Projects

welcome to Learning Partner in this video we are going to complete the whole project in angular 17 will be from scratch up to the complete development obviously we will skip some of the part like basic crowd operation is there right one for one component I will be taking but for another I won't be taking everything because if I same code is going to be there just API changes will be there right now coming back to Pro project like the project is ticketing software so if you just Google like ticketing tool so you can see so many different products are there which will which will serves the purpose of the ticketing tool service now is also a big kind of a what do ticketing tool is there which most of the it companies uses but in every IT company there is some tool which they use for raising some ticket right now where ticketing to tool plays the role let's say you have an IT organization or any manufacturing industry or any type of organization right where so many let's say in thousands or LHS employees are there let's say an employee enters into a company he is working right he need help with his system like his system is running very slow or he need a simple mouse or his uh laptop is not working properly so you cannot call someone and ask him to help you there is a system that you need to raise a ticket right that with the particular Department then that ticket will goes to particular employee right let's say we need a new mouse right so that request that ticket will goes to that particular hardware department it that ticket will be assigned to a particular employee then that employee will deliver us a mouse then our ticket will get resulted just like that ticket can be raised to HR department related to any appraisal payroll department related to your any salary query or anything PF related anything it can be right so whenever you need to do some whenever you need to ask something or you you need to resolve something you need to go through the proper channel so this is what ticketing tool is going to be the role which is going to organize the structure now coming back to the flow diagram so let's say we have a login page now everyone is an employee the I mean the employees who are going to work on work on your ticket they are nothing but employees only but they have some different roles so for now we will consider them as an admin now employee so in employee login uh admin people will create your logins and everything right so in admin login employee creation Department creation everything basic current operation will be done in the admin login coming back to employee so if you are an employee if you logged in you will see your dashboard in dashboard you can see like how many tickets you have raised how many how many of them are in progress how many arts close and everything basic statistic then you can create a new ticket and you can see all the tickets you have created till now also so you can see in employee login he can create a new ticket once the ticket is created it will go to the department head let's say we have created a ticket to the payroll department so that ticket will go to the payroll department head whoever the payroll department head is there it will land to his bucket then will decide like from his Department who is free right so he will assign that ticket to that particular employee from his department so from the department head he can see the new tickets he will assign the ticket to particular employee from that particular Department then the let's say that particular employee login he can see the assigned tickets he will start working on that ticket and he can close also so this is just a simple flow we are not going to have a full pled application but this is just a basic flow which you will find in every application obviously some more pages and some extra details will be there but we are in this video we are just trying to cover the basic flow even even in service now also same thing will be there just in a more flage and a detailed way now I will explain the tables also like how many tables are going to be there so if you see we are just going to have four table first is Department table so here we are going to create all the department including department head also like who is leading that department then employee all the employee information will will be stored into this table then an extra thing is there that is about leaves I'm not going to discuss in this uh episode for that then we have ticket so this is the table where we are going to store all the tickets now these are the three tables only which we are going to need so with these three tables you can complete this whole flow now coming back to API so apis are already developed so in free API Min project.com you can find all the apis let me just minimize so you can see here are the different employees like to the current operation of Department then employees login page leave portal is also there but I'm not going to cover into cover this leave portal into this video because our main focus is for the ticketing tool then we have some API for the tickets like uh with Filter also create new ticket assign ticket start request close request right so these are the various apis we are going to have now coming back to the angular side I have created an angular 17 project let me just show you the package.json you can see 17 version is there NG new then the project name then uh once it ask it will ask like do you need a server s side rendering or not so you can says no Then the basic project is created I have added bootst also so in angular.js I'm adding I have added Boot and the font aome CSS now let's run the project uh this project is kind of a detail one here we are going to set up the architecture and everything all advanced things we will try to cover it it will be a long video but if you do this you will have a proper knowledge considering all the advanced scenarios we will try to do the Interceptor a pipe then reusable components everything whatever we can think of an advance that we will try to implement so to run the project we just have to use the command NGS and one more thing like this video is not intented for the audience who are just starting with the angular so this might be very high or it will it is not it won't be easy to Gras but if you know all the basic you are done with your all the basic topic then you can surely start with this project let's run it LO 420 so you can see by default this page will come now let's close this coming back to folder structure so whenever we say what do we say project setup so what things we have to consider so first is like we should have a constant file there we will put all our constant data we should not hardcode anything any anywhere everything should come from the constant F then reusable component then Services environment files right just I'm just uh taking the basic things then pipes custom pipes custom pipe we should be able to create then we will try for custom directive also and obviously new features in angular 17 what are the new things we have got in angular 17 angular 17 support the old whatever uh things we had in the old version that it supports but in addition it has some new features also like signals uh to hide and show we have some another things right so that we will try to so let's start with the project setup first so in app folder first I will create a core folder now core folder will contain the things which are related which doesn't have UI it will just service class interface oard and everything so in core folder first I will create a service folder Services then we will need models folder here we will be creating classes and interfaces is then guard folder I'm create creating here we will create all guard can activate can can deactivate what are the guards we can use then constant file right so in core folder we are going to have we are going to have four four this folders then we will have inside app folder only we will have uh Pages folder Pages folder will be responsible to store the components which we are going to access by routing this won't be reusable component then I will create a folder sorry in app folder I will again create a folder that will be shared now shared folder will have reusable components so I will name it as visits visits nothing but reusable component I will store into them then I will have pipes then I will have directives I might be forgetting something but once uh we move ahead once I remember again we will be keep adding but basic structure will be like this so in core folder we will have constant file so let's just create a constant file so constant dots now here we have to create a constant file so export name of the file will be constant only now so in this constant file we are normally we will store the validation message Api end points so many things we are going to store so let's say first I'm creating API API end underscore point and here we are going to have here we are going to store the all the API points whenever you create a constant file now the name in the constant should be it's what do we say it's not mandatory but as a good programming practice constant file whatever the variable name you give properties name you give that should be in the capital case with separated with underscore so let's say let's try one of the API first AP let's say get department so now if you execute this write out execute now you see in all my API this is going to be constant up till this ticket slash because only one server is there so up to this this is going to be constant so this we will put it into the environment folder but these are nothing but my method name these are going to be change get Department add bulk right whatever the things you can see create Department update Department delete these are nothing but methods so this these are the end points so let's say get sorry get department and value will be this right so here we we will keep on adding multiple end points let's add one more create Department col let's get the actual method name this method name will go over here like that we will keep on adding once we start making the API call just like this let's say we need the validation message also now why do we need to store it because in HTML we hard code it so rather than hard coding it it should come from the constant file so we can create a con we can store all the validation basic validation like this is required meain length is this just like that validation message we can store here so let's say first is required here we can say like this required now just like that you can keep on adding regular expression whatever you you cannot store so this is about the Conant file so after the constant file we can start with the service but before service we have to create the environment Builder because there we are going to store our API actual API URL so on the project rout level you just need to open a new terminal now we are going to install environment before angular 16 or 15 I think environment folder was part of the angular project only but now you have to explicitly install environment so NG generate environments let's Center is it environments let's try yeah so NG generate environment so this command will generate environment folders so you can see we have got the environment folder and there we got the environment and the environment development. TS and after it this same entry will be added to the angular.js over here now so environment folder is like uh when we start any project we have different environment like development environment QA environment production environment U environment according to the different environments when different server we might have apas also different because for every environment we will have database also different so obviously API will be different so all the things which are different related to API this is nothing but constant because you can say it is nothing but constant but this constant file is related with the specific environment environment specific uh constant we are going to store in the environment files so let's say here API underscore URL and here we are going to store the API URL means that will will be up till here right so this is going to be constant all over so up till this this is going to be constant so same variable you need to create over here also like this so our environment file is done so after constant we have created environment then we have to create a service folder first so right click now I'm going to create a service so NG generate service let's say master service I'm going to create master or Department we just have one master only so department now we are creating a department service so in this service we are going to store all the API calls of my department component whatever the component what are the services we are going to need that we are going to store it over here now so here first uh obviously we have to make the APA call right we are going to make the APA call so now to make the APA call we need HTTP client model that uh to be loaded right but in angular 17 we don't have app module so if might have seen we have we have just app config.js so in angular 17 you don't have app module so but to use HTTP client we need to import the HTTP client model let's see that so in appconfig dots in provider you need to write provider HTTP client and here we need to pass let me just search it because I forgot how we used to do that once we get the era then we know like why we need to resolve that let me just search it so it is like this only in the providers you need to add provide HTTP client now in the department service first we have to inject HTTP client so private HTTP colon HTTP client now here I have to create the APA calls which we are going to need for the Department card so first API is will be get all Department now this function is going to return data type of observable because we are going to make APA call so let me just first write that return this. HTTP dog G API call is there now first we need the API endpoint but API endpoint we have stored in the app config.js right so environment do API URL after that we need to bind our constant right so constant dot now we need the import so let's just add that first API endpoint dot we need G Department right so this will form our whole URL the actual AP end point then the method name and this method if you see on the gate it is returning the data type of observable so here you should write observable because this method is going to return data type of observable now coming back to the any when you know like what type of data you are going to get so if you see my API I get the data all my API response is like this you will get an object in that object you will get three properties message result and data this is going to be constant response of all my API so for to handle this instead of creating as any we can create a model now so in model I will create a uh interface let's say API models api. model dots now here I will create an interface export interface AP I response and now what are the properties I need in my API response message result and the data so let's create those message this is going to be of data type string then result this is going to be data type of Boolean and then data now data is dynamic so here you can specify as any now this interface we will use in our service now instead of any now I'm going to know let's add the import first now I'm going to know like this function or this API call is going to return the data type of this so after gate also we need to add the interface name so you'll go over here so this should be your proper API call the this API call this function is returning a data type of observable along with this type right then after gate also you need to provide this so this is your proper API call so let's just complete the remaining one also so in constant we are going to need the update and the delete let just complete instead of create it will be update and last will be delete let's just get the method name also create was there update let's copy then we need the delete one so now when we set the delete for delete we have to pass the ID so it will URL will be something like this up till ID is equal to this we are going to need then the one whatever the parameter you need to pass that will be dynamic so it will be like this so you can see in the constant we have added four of our methods let's create the API call function also now since and for the first time we have written and I have explained also but now I will just copy paste so this will be create new department now create new department is the post API so instead of gate it will be post for post API we need to pass two parameter URL and the object right what data you are going to store so URL will be instead of this create department and object now this function we are going to call from our component so from there we are going to send the object any again I will cover to this now instead of any we know like what kind of object we are going to send while creating so this is the object so let's create interface of this instead of interface let's create the what do we say class export class sorry Department model and these are the properties we are going to have doesn't matter like you put uh field in the double quod or not now instead of zero you need to pass the data type as number instead of [Music] string here also number and here date now if you see these are giving the error like it is not initialized so since this is an class so we can have a Constructor right so every class will have a Constructor doesn't matter where you are writing it so in the Constructor you can just initialize this property new date I will initialize with new date then this dot Department ID will be initialized to zero because this is going to be primary key then Department name with the initialization with empty string and Department department head employee ID is going to be with zero so this is how my department class is going to look like now this will go over here instead of a any this is going to be do over here so once you complete everything now then you will get to know like what why we should we we create the interface and the classes you will get strongly typing strongly type data types everywhere so create Department after that update Department the API will be update department so if you see the Swagger for update we have the put API so here you should write instead of G you have to write put and obviously you need to send the object same object what we have stored what we are passing for the create the same object we have to pass it over here also then last one is the delete department now it is delete so when we deal with the HTTP calls we basically have four repair calls Gate Post put delete instead of delete now for delete Department we we don't need to send the object but if you see the constant we have to provide the ID so up till that here it is there then we have to provide the ID so here we will have the parameter like ID the data type will be number and this ID we have to provide over here so plus ID concatenation I'm just doing so our service work is done you can see now coming back to uh service I have explained because I have created the constant and how we use the constant for that purpose I have created the uh service but still we are left with the component page component creation so let's just close everything let's just get back to the basic Pages creation whatever the pages we are going to need so constant is done guard we will create model and service folder is done now coming back to pages so if we have seen the what do we we say flow diagram so how many components we are going to need so let's try that components so first will be employee so here in employee component we are going to do all the employee current operation then Department then we are going to need a login page once we do the login we are going to need one more parent component which will act as a parent page there we will have the nabar so I will name it as a layout here we will keep our now bar then tickets page new ticket page so and One dashboard so these are the various component we are going to need so let's create one by one so right click on the pages folder open a new terminal so to create new component the command is NG generate component you can write the generate or component or the short form also first component I'm going to create is the login let's enter so in previous version when you create the component it used to create four files and it used to update the app model but we don't have app model so all the component in angular 17 are by default Standalone so you can see Standalone true is there means these are the independent actual reusable component wherever you need to use them you can import it and you can use it right after that then you you will need that layout component and extra component which will act as a parent component for the now bar let's enter let me just create the remaining one so as you can see I have created all the components which we have discussed dashboard Cod Department employee layout login new ticket and the tickets component now coming back to Shared so in shared component what things we are going to need So currently we we once we start the development then we will come to know like what directives and what pipes we are going to need so for now I'm keeping this folder as empty and in visits also we are going to create the reusable component but for now my for now I will keep those as empty now coming that to the coming back to the pages folder so first we have created the component right after creating component you need to create the routes so we have app route. TS here routing we have to create all the routes so routes coming back to the routes like first route you need to create will be the default route right so path will be empty then redirect to that will be redirect to the login and path my strategy you need to pass with the value full so this is going to be my default route means in the URL if we don't have anything it will redirect to the login page then we have to create the login page route login and the component we have to render it will be login component then again one empty path will be there but now for this empty path we have to render the component that will be layout now after login whatever the components we are going to need all those component will go in the children of this layout component so here we have to create all the other components which we have created means all the component which will be accessible only after after login so all this component route we have to create inside the children of the layout component again path so let's say first component will be dashboard component dashboard component comma like that I have to create the remaining component also so I have created the remaining routes so just pay attention this is a default route this is a login route once we do the login then this component will be activated means in the layout component we are going to have the nowar and all the component which we are going to access after the login will be part of the layout component children this should be your routing file now so in app component if we are not logged in means by default login page is there so for the login page app component will be my parent component component so here we are going to need router Outlet now just pay attention in the router Outlet this is not giving us error because in app. component.ts we have router Outlet imported and it is added in the import section now the rule goes in angular 17 like whatever you use you need to import it previously we didn't it was not necessary to use the to import the router Outlet or router link but now you if you have to use the router Outlet you need to import it even router link you have to use you need to import it now so this variable we are not going to need so let's close it now if we save all and let's try to run the application okay we have it running let's just save all so by default our login page should be visible so you can see if I just if I press uh just in the URL if I just enter the Local 420 as we have created a default route it will redirect to the login page right now we need to find the login page so login page HTML CSS Cod P let's just go over there and let's try to find the easy one very basic should be which one let's try next let's try this if it is simple one let's try this one so now first we we are going to need is the HTML Cod so from this container we are going to just copy let's go to the login component let's paste it over here let's just format it one more time after that we are going to need the CSS so let's go over here just copy from the body you can use any login page just don't waste so much time into finding the the correct login page because the functionality is important UI is not that much important but you should focus on the functionality right so let's just try to save okay one more thing so here body was there but we don't have the body right so we can wrap whole our login page into a parent de du class parent so that that whatever the CSS we had for the body we can append to the always try to format it and this we will replace instead of body now it will be parent so let's just save with this the same login page should be visible yeah so same login page whatever we have seen in the Cod pin same we are able to see so login page is done now here we need to integrate the login API so let's try so you can see I have just created one API uh some employee we are already created so login API we need to pass these two Fields uh email ID and the password so let's again any uh whenever you are creating uh what do we say new API call first you have to go to the constant file in the API endpoint you need to add that endpoint this is loog login and the endpoint will be login only right now either you can create one more service right but uh uh I'm just going to create a employee service and in that only I will keep the login function as well so n g generate servers employee because for user related we don't have anything like forgot password and everything reset password nothing only login pen is there so I'm going to create an employee service and in that I'm going to create login function so here private HTTP colon HTTP client right now I'm going to just copy paste the things I go I need so post API I'm going to need so I will just use that copy paste if you have not seen the previous part please do watch it in the department service I have explained everything how do you uh do this uh constant and everything now just like the department again we are going to need one more con model so let's go to the API models either you can create multiple classes files also but or you can store it in a single files also since this is a very small project so all the classes and interface I will create it over here only again just to save the time I'm just copy pting Str in here it will be login model now things I have in the login object so email ID this will go over here and the password only two fields we have to send right this will be again with empty now so in the log employ service instead of this department we have to pass the login model again constant was needed login model input also needed now instead of this create Department we have to use our login constant so this should be your uh login API function we have created in the employee service now coming back to login page so here first we need to create the object so that will be let's say [Music] login obj now data type we have already created the class so that only we have to use login model right now this is a class so we need to initialize it so new login model like this you can initialize it now this login object we have to bind to the form using NG model so we don't need this on click square bracket round bracket NG model and we have to pass our object dot so see the benefit of creating class and interface you get the intellisense if you create that uh mod object with any you won't get the intellisense right so this is the benefit of creating classes and interfaces now so if you see we are getting the error like cannot buy NG moduel because we have to import forms module now I said like we don't have app module so here only you need to add the forms module so wherever you have to use the NG model in that component in the import section you need to add the PS model so now you can see error is gone now on click of login we don't need this we don't need this also instead of submit let's make it [Music] button click on login let's create this [Music] function so here in this function we are going to make the AP call but before making the AP call obviously we need to create the object of that service with dependence injection we need to inject that so private employee EMP Service employee service right so once we select import will be automatically added so here this do EMP service dot only one method is there login and to this method we need to send the object login object do subscribe round bracket round bracket result colon now the response type we are going to get we have already created right so that only we have to use it so this is the response this will go over here we need to add the UT Arrow function now here you should in each APA call just apart from the gate you should add ifs and else statement so in result dot result property you need to check so all my API will return return the same object and in the result property you will get true if the API call is Success if it is error you will get it false and in the message property you will get the error so this code should be everywhere then I'm using alert since we don't have any we have not installed any third party Library so I will be using alert only so here I'm uh after login just for now I'm showing the message like login success but in ideal application we don't show any popup once we do the login because it is irritating why do we have to click click on okay now after login after login we if login is Success we directly navigate and in alss we have to show the message we get from the API side so result do message thing now once we do the login Lo if login is success in the data we get the object that data we need to store to the local storage so local storage do set item and let's create a ticket data and here whatever the DAT object we get user detail we get that we need to store through the local storage but while storing the data to the local storage we should only store data into the string format so to convert object to the string format we have to use this on. stringify and we need to pass result. data over here and after after the login and after the local storage we have stored we have to navigate to the dashboard page right so to navigate again back we need the router service so private router now here this. router. navigate by URL method we have to use and we have to pass the URL so once user is successfully logged in then we have to rate to the dashboard page so this URL we have to pass into our over here right let's add a debugger to check the code for the first time let's save all let's check if it is everything is correct yes it is all compiled code compiled successfully now we have to use this email ID you can create your employee and then you can use it but for now I'm doing like this password 1 1 22 33 let's just inspect on click of login you can see our API call function got triggered now in the login object you can see whatever we have typed in the form that data we have got successfully stored into our object I'm adding a debuger on line number 25 also now in the login we have to click over here let's just add it over here continue so once we hit once we hit this function from this service and we are passing the data also so here in object you get the data and here you can see we have got the API URL up to tickets then we have our login so this after that login so our complete URL will be formed like this and we are sending the object so let's continue now in the network you can see the it is successful so whatever the response we have got that you we are getting over here you can see in the data we have got the whole object and result properties true so login success alert popup will be there then we are storing the data into the local storage let's go to the application so currently we don't have anything in the local storage with one size save continue let's go to application and you can see whatever the data we have got from the API we have stored that employed is 15 the user number everything continue and after that you can see we are successfully navigate to the dash mode let's try one more time now we will try with the wrong password let's just add something login now you can see we will get the error so now in the result you can see result is false and in the message you get the wrong creden right so that's why with all the APA call this code should be there if and else block with the result check now in the dashboard is looking like the simple page so coming back to the layout component so we have created the layout component here we have to keep our now bar so let me just get a proper now bar rather than using the standard boot step one so for sidebar means the now bar I have simply searched responsive sidebar HTML CSS for p and this is one of the proper and the basic one I have got it will at aead also so let's try to use this so I will just copy paste the de let's copy now this we have to put into the layout component after that we need the CSS so let's copy everything let's put the CSS into this again the same thing what we have did so let's replace that with parent and this parent we have to create one more the container we have to put it inside over here and we have the Side Bar after that we will need one more du and here we are going to have router Outlet so now you can see here we are getting the error that's because we have to import the router Outlet then we will then we won't get the error so let's just save all and let's check if we get the proper nowar let's try to log in to sing wrong credential 1 1 2 2 3 3 login login success it is there but something is incorrect let's see why minimum height with 100% let's try to remove this and let's see how does it look now right is not taking a p full screen okay because of this container we don't need this container we as 100% and height let's try yeah it is there but just because of the container it is uh providing some spacing because container class is in our bootst also so instead of container let's try to remove this container as we don't need it so here we can see we have got that particular why it is not taking the 100% width let's check okay parent we have not done so this class we have to replace like this margin paring 100 VH will displex it was looking proper over here that's why I chose that I don't like wasting time like this so let's try to find another one let me just try first then I will explain okay so simple one I have got so this is what I have selected so you can see the output without doing anything I got that just the icons are not coming but uh we have already installed the font a some so instead of fast let's make it far because this that was the old version Now icon should come let's try still it is not coming why is it so onum 4.1 first for the home let's find the home icon power home let copy same only my icon is not visible why is [Music] coming let me just check my angular.js if I have not added it or not it is there okay so let it be don't let's not waste the time let's remove this so here so first we be let's say Das dashboard then we will have employee so now instead of H we have to use the router link right so to use the router link also you need to import it so here router link you need to import and then you can write and here we have to pass pass the path name let just close whatever the routes we have that we will just enter over here so dashboard it will go over here let me just copy let's replace it then we have employee then we have Department then we have tickets and the new ticket for now I'm just skiing everything over here but uh role wise some things are going to be hidden just save and check if if we click on the particular page that component should be loaded so if I click on the employee you can see here your employee component is getting loaded right wherever I'm clicking that particular component is getting loaded over here in the router Outlet section right so we have uh done the login implementation we have shown we have properly created the nowbar also but once we do the login we have stored the login detail into local storage so we have we have to show the logged in username like which user is logged in So at the bottom here we can show the the logged in username so let's read the local storage data into layout component so here I'm just creating one variable that will be logged data poon now instead of any let's check what was the response we have got from the login API that will be nothing but an employee only so this was an object so let's create an interface of that now we have uh redate some sites are also there which will convert Json into typescript file just on to TS so this is the site you just need to paste the model what whatever the Json you have and then it will let you create the proper interface so let's copy this now we have to go to our model folder so here again I will create a export class employee model the properties I have and again Constructor I'm going to need so Constructor let's just initialize this. employe ID email ID is equal to empt like that this dot contact number is equal to mty let me just complete this so I have created the class now this class name I have to provide it over here new we need to import so whenever you have to create a variable and you are going to store object into that see what are the fields you have create a class or the interface now in Constructor right right in the Constructor on the page load we need to read the data from the local storage so let's create a construct const local data is equal to local storage. gate item so we need to we need to pass the exact key what in which we have stored so in the login page we have stored the data so let's go over there so this was the key so this only we have to use while reading the data so while storing we have used the S item method now while reading we have to use this now whenever you read the data from the local storage you should add a null check so local data not equal to null then you need to assign that data to our log data is equal to but when storing the data into logo storage we have stored the data into the string format so now we have the data object into string format so again to convert it back we have to use the Json pass method and we have to pass the local data so now it will again convert the data which which we have stored into the string format again to the object form now in log data we will have the logged in username so this we will show it over here in the interpolation dot m email ID we will show it so let's just say so here you can see it is visible but we just need to get rid of those icons so here you can see it is visible now we are going to need the log out button also but that we will uh complete after some time so this will be home or let's here we will let's add an service tracker just our application name so here it is visible okay it is very long one so let's take it that is very small one now first page we are going to complete is the department page so in this department page we are going to complete the crud of the department means we are going to do the uh new Department creation show all the Departments we have then update and the delete all the four operation so we already had created the services at the start so in Department service you can see all the services are over there model also we have created now we will start with designing the UI so let's go into the department HTML now to uh perform the crown operation I will use the card structure so on the right side side in the left side we will show the list of the department on the right side we will have the form so I will just create the structure with r do call 8 Dot card do card header. BG success just the card card structure I'm creating in and here we will let's say H or let's directly [Music] show Department list and then we are going to need card body these are just the bootst classes I'm using and here we are going to show the table so table plus table table hyb R Ed B then here we are going to need a t head TR then th we are going to need serial number so in the department we don't have that much things just the department name and the department head name name let's make it Department name and then we are going to need the we need to display the department head right and we need the action button also so th and let's say action just like this call it I'm going to just copy this whole thing and put it over here after call it remaining is the call four but here create form will be there create new Department so here we will have the form instead of table here we are going to have the form so do row do call let's say or 12 only because we just have to field Department name and the department head so here label name and we are going to need the text box so let me just complete the form designing then you can see the complete thing form hyen control class we need to add just like that I will just copy paste and here we are going to need the drop down of the employee because we need to select the department head like which employee is the department head uh which employees leading this department select department head and here option will be there and after this I'm just going to create one more row and here we are going to have two buttons save and the cancel res set just like that again one more button for the save and just add a success uh color to this and let's add text Center class so let's just save and check if UI is looking in proper so this is what my UI should look like just for the drop down this class is missing so let just add this for drop down you can use form select class right now we just need some spacing from the for the button so pt3 let's just save now you can see just the basic UI should look like this here we will we will show the department list and here we will have the form on click of edit and the new everything will be over here now on the page load first we need to call the Departments so over here obviously we are going to uh need the forms module also so let's add forms module then we are going to create uh s Service instance of the department so private Department service now on the page load we are going to make the AP call so we are going to need on in it so on in it here we have to add it then we have to implement it also so Implement on in it and once we implement we need to add the NG on init function we will create one method which will be responsible to make that APA call so load Department round bracket curly bracket enter so here we are going to call the API which uh which what do we say which we are uh from this function we are going to call the particular service function so this do Department service do get all Department do subscribe so we are going to subscribe to whatever the response we get result colon again the same thing all my API response are going to get the same data so login sorry the API response model we have to use it over here in instead of the am we have to use that now we need to subscribe now this is the gate API if even if we even if we come across an error we get an empty array so here if it is optional like you should add that if statement or not but whatever the response I get we can directly store that also so I'm going to need one more variable that will be Department list colon now the department object let's see if we have created the department yes so this object we have created so so let's paste it over here and this is going to be array so like this and let's initialize with empty array we need the UT also whatever the response we get that we need to store it over here so this do Department list is equal to RS do data in data we will get the array and this function we have to invoke from the NG on in it like this so let's just save and check if we can can see the APA call in the network so if we land to the department page so on the page load you can see the API response so let's check the API response so so many Department okay uh one thing we have missed that is department head name so this property we are going to need in the list API only you are going to get that property so let's just add that let's initialize that with empty right so here in this variable you are going to get all the data of the department let's just show that in the table so just like the T head we are going to need a t body and inside that TR we have to iterate this TR so we have to use star ng4 over here let Department of Department list whatever the number of th we have created over that same number of TD we have to create so let's just copy paste four TDS 4 th were there so four TDS are here now here first serial number is there so to get the serial number here let Sr is equal to index you need to create and in the first TD you need to show the serial number so Sr + one because serial number index will start from the zero so that's why plus one I'm doing and here we are going to have object department DOT it is not suggesting okay so this is giving errors now again one more thing in the angular so like if we have to use the ng4 and the NG you need to add the common module in our import section so here you need to add common module then only it will you can use that so now if we press enter you can see it is suggesting now because previously on NG for it was giving the error so DPT name you have to show it over here then after that department head name and here we are going to have edit and the delete buttons so button class BN BTN s small button I'm taking then the color BTN success so first button I will be creating for edit and the next button I will be creating for the delete so delete one and for the delete let's just give a Binger color let's just save all and let's check it so on the page load we will have the API call and once we get the data that data will be visible so you can see the data is visible now if you pay the attention some department head name is not coming somewhere it is coming but somewhere it is not coming so that we can handle now we have a requirement like if we don't have anything in the table we can show like not available or hyphen ion so for that let's create a custom pipe so in the shared folder we have the pipe folder already already created so right click on the inter integrated terminal now we have to create our custom pipe so let's give the custom pipe name as NA means not available so NG generate pipe na center now this pipe will be responsible to check like if we have either value will be of the three time null undefine or the empty so all three value we will check if not then we will return return the value so let's go to na pipe so in the pipe we have the transform method now we are not going to need the parameter so here we have to Simply check if value instead [Music] of Let It Be unknown only if value not equal to [Music] null or sorry and value not equal to undefined it is not undefined also and value not equal to mty only these three combinations we can have either value can be null undefined or the empty if it is not null if it is not undefined or it is not equal to empt then we will return the value as it is but in else we will return a string value that string value will be n a not available now we know the data type right so we don't know look what kind of data we are going to get because this is a reusable pipe all in all the tables we are going to use that so for that I'm keeping unknown as as it is so in the pipe also you can see stand alone is true because pipe uh just like the components also pipe will have uh pipes are also now a standalone right so to use this pipe we have to import it also so here if I use the na pipe directly let's see like I'm also not sure how we can handle that so over here we need to add na pipe so now it is saying like no okay we need to import in the department component it has suggested so in the import section only we have to add that so you can see na pipe is added over here and then we can use it now if we say wherever we had that empty now there we will show that na na so here you can see not available is coming wherever we didn't get any data from the API side we are showing na so we have created a one custom pile custom pipe Also let's just add a spacing over here MX2 and let's make uh them in the center so class three Center so one thing is done on the page load we have called our get Department API and that department we have shown in the into the table next thing if you see the API the create one so we have to pass the department head employee ID so this is nothing but the employee what whatever the employee we have out of that employe one employee will be the department head so we need to call the get employees method because whatever the data we get from the employee that we need to display over there right so let's call this now we need to create the constant also so let's this is a new APS obviously we need to go to the constant it will be get employee the method name will be get employees let's create a method in the employee service we have created the employee service get all just let me just copy paste so that we will save our time just the method name we have to change instead of post this is my gate API and we don't need the object instead of login it will be get employee right everything will be same now on the department page load we have to call two API load department and the gate employee also load because in the department head we have to show the employee list then he will select the user will select like who is going to be the head of this department so that's why we need to call the department so here again second service object we have to create EMP Service employee service so here Employee Service dot g all employee API call we have to make why it is saying it has the argument we don't need it let's remove that now whatever the data we get from the employe that also we need to store it somewhere so now here we will use here we will try to use the Asing pipe instead of creating variable and then assigning it to the dropdown let's create an observable uh we are going to use the Asing pipe so now to store the data into the Asing pipe first we have to create the observable so I'm creating observable employee normally when we create the observable we put asri sorry dollar symbol at the end so just to make uh just to as a what do we say good programming practice we do like that observable and the data type we are going to need we are going to get is the employee object so that will be we have created the employee list yeah this model so we are going to get the data of the employee model now it will say like it has no initializer let's uh let's make it undefined at the by default now in the Constructor or the NG on it you can do like this employe object is equal to now instead of making this API call And subscribe you just provide this two over here why it is saying now so you can see here we have specified the data type as employee model but our this function Returns the data of type object so we just need to change it so Employee Service let's create another function same one but the return type will be something else instead of get employee list and instead of this API response I will return the data of type employee model only so for that here like that now we have to use the map operator also over here so once we get the data we need to add the pipe operator and we have to use the map now the response will be this this why is showing the error one more round bracket we have missed return RS Dot something we have missed pipe then map employ ofing in the properties of response let's make it any here we have to return return RS dot data so here I'm just providing it any because it is we are from API we are going we are getting the object right but from that object we are just going to return the particular data properties so that's why uh it it it was getting confused like we have this so that's why here only I have kept kept that as any but this API this function is going to return the data only means actual data whatever the data we get not the whole object so now this function we can call it over here then we will get that error you can see now error is gone because this this function is going to return the data type of the list of the employee model now this employee observable we can use it on the dropdown so here we have to use the star NG for let EMP of my observable name and the pipe that will be a sing pipe we have to use like that and here we have to bind the properties EMP do employee ID we have to bind but while displaying we need to display employ name so EMP dot employee name we have to display so let just save and let's see if drop down is coming properly or not so here you can see drop down is coming and in the option we have value might be binded properly so you can see whatever the employee ID is there we have binded it now on click of save we need to call our save API so let's create click on Save let's create this function so here this do Department service dot create new department and we need to pass the object so this do Department object we have not created object oh so we need to create the object also right because we have a form so we need to bind the object also so same like that Thea Department obj the data type will be department is equal to Let's initialize that and this we have to bind to our form with NG model square bracket round bracket NG model dot here departments Department name will be over here and at the department head department head EMP ID will be over there like that now to the object we have to send the department object then do subscribe bracket Ron API response model and here we need to add that if and else block if result. result is true then only we will show alert like Department created and once department is successfully created again we need to call the load Department also so that latest department will be visible and in else block we will show the error whatever we get from the API so RS do message save AP call is there let's save all and we will test it if department is getting created So currently you can see we have 12 department so let's just try to create one new let's add a hardware department let's say Vick is the head of the department on click of save you can see create Department API call is there but it is saying like Department name already present let's see why so we have send the department name as Hardware let's see if we have the Hardware al yes so here you can see Hardware is already created that's why in the API response we have got false and in the message we have got the error that's why that if and else block is very important so let's say software installation Department let's click on save so now you can see department created success because we might have got true over here and once uh API call was successed then G Department call was also there so here you can see the latest department is already here now we have we have to do the edit and the delete so now in the table we have created the edit button so here now there are two things now it is just a small API whatever the data we need to display in on click of edit that is already available in the table only but we have an API also I think we don't have API to get the API so we have to get the data from the table only so let's create click function on edit and for on edit we need to pass the department object so whole department object I will be passing let's create this function now for this function I'm going to get the data item that will have the data type of employee Department only so it will go over here and this do Department object is equal to item whatever the data we get from the front end that we need to assign it to the department object let's just save and check now when we do the update now update is a two part first edit on click of edit we need to display the form uh data in the form and on click of update we will actually update the API so let's say if I click on software so you can see wherever I clicked right the data is getting visible wherever I have the department head that is getting selected so here you can see okay like that now on if we have if we have clicked anywhere in case of edit one so that what do we say uh instead of save it should be the update button that we can be uh that for that we need to add a condition to show the update button so let me just get the update let me just create the update button first this will be update and the new function will be on update now in the department object if we click on the edit we will get the ID so now St NG if we have to use Department object. Department ID equal to equal to zero if Department ID is equal to equal to zero then we can know like this is going to be the new form so save button will be visible but if it is not equal to zero means on on click of edit obviously ID will be there so in that case update button will will be visible let's create this function first let's just save and check so if we click on the edit now you can see update button is visible and we have to write that uh reset thing also on click of reset we need to reset the object reset let's create this function in the reset we just need to initialize that whole object one more time so the same thing like that we are just reinitializing this object now on update we need to make the AP so I will just copy this code over here instead of create Department it will be n Now update Department Department instead of created it will be updated success let's just save and check if we are able to update it so the last we have created software installation let's click on edit now it is visible over here instead of software installation software and installation I'm making just I'm adding in and on cck up update you can see Department updated success and the same why it is not visible let's just check what went wrong because new name is not there let's click on edit software installation let's make it to network on click of update yeah update department is there response also true then new is also there but the old value is only visible might be API is not working let's check the response let me just check the database my update API might not be working but by the time one you will see the video it will be working it is not getting changed I will check the API but the code will be same as it is now let's check the delete one so on click of delete also we need to make the API call just like the deletes right so I will just copy and here it will be on delete now to delete delete we we don't need to sell the H object because for the delete a we just need to send the ID so that's why from here also I'm sending the only ID so let's create this function now once we click on the delete now we have to show one more popup like just a confirmation like are you sure want to delete or not so for that I will use the basic popup we get from the JavaScript so that will be is delete just a variable I'm creating confirm box and here we can send the message or you sure want to delete and if user once we show the popup now we will get okay and the cancel button if user say okay then we will get true in this variable if it is true then only we will make the API call let's copy this code code APA call code now instead of update it will be delete department and for the delete Department we just need to send the ID that we are going to get from the parameter so this we will pass it over here delete Department deleted success let just save and check if delete is working so let's check the last last one if I click on the delete now you can see we have got that confirmation message if I click on cancel let me just show the see nothing is happening no API call is there let me try it again right but now if I click on okay you can see API call is there with the ID Department 37 and once we uh after the delete API call again get Department AP call is there so you can see the record has been deleted so this is how we have to do the crow operation of the department so with this we have completed our department basic crud next thing we will start with the employee so after the department list SC operation all done we have to move to the employee registration so in the employee page we have to do the registration now in the department page we have shown the data into the uh table format right but in the employee we will try to try to display the records in the card format so that we will cover most of the scenarios and in angular 17 instead of ng4 we have at the rate for Loop so that we are going to use so let's start with the employee page now the API we we are going to need is get employees this is the API which get us all the employees then on edit we have to integrate this get employe ID then create employee update employee and the delete employee this uh get employees by Department is going to be needed in the another page so let's start with let me just close so in the employe component first we have to start so before uh starting with the let me just complete the UI design first so let's go over here as we have done in the first component we will start designing over here also call it inside that I will will'll need a card do card header. BG success then after the card I need card body here we are going to have title so that will be employee list and here we are going to show the multiple cards now let let's just copy this and paste it over here with call for and this will be new employee form here we are going to have the form so let me just design the basic uh employee form so this is going to be our UI so here we will show the employee list in the form of card and this is going to be our employee form so now let's see the object of create employee so this is an object so employee ID is nothing but a primary key so we don't have to concern about that employee name text box contact number again text box email ID text box Department ID now we have a department ID now we need to get all the department and show whatever the Departments we have in the dropdown so here you can see select Department here we need to show the Departments we have created so here we need to make API call now in service department service we already have created the get all department so this is the benefit of creating service now we don't have to again write the AP calls already AP call is already created now we just have to integrate that service and call that particular employees so Constructor private Department again uh we can make use make we can make use an a sync pipe so I'm just going to create an observable Department list with dollar colon [Music] observable now we know like Department data is going to be there Department model let's see the model name so Department was that let's instead of any I'm just going to use the model we have created now it will be saying like it is not initialized so let's add that undefined also now the data we are going to get so in the Constructor this dot Department list is equal to Department service dot get Department that's it something is wrong why is not a okay so we need another me because this API this function is returning data type of API response so we have to create one more method which will get us the actual data so let's create another function in the service just like this where we have to map and pass the particular array get Department list API response API response map we have to add right now instead of that this function now we are returning the data actually from the AP we are going we are getting the object so from that we are just returning the data now this we can use it over here now it Returns the data still why it is [Music] saying are we missing [Music] something no here we need to add this department now the response type of the get Department list is nothing but department now it won't show the error still it is showing let's see Department object okay so here here we have created simple object it should be array now in the department list observable we are going to get the data so that we will integrate on the department drop down so it will be inside this form so here opt and here we have to use the for Loop now instead of the normal ng4 we can make use of the new for Loop we have got in uh in the angular so that will be at the rate or and here we have to write on the dollar syn pipe now to use the syn pipe obviously it will come from the common module so we have to import that also so here common module we have to integrate now error is gone and this option will be inside the at theate for just like the atate NG for we used to on the particular element but now just like on in react also we have the same structure so and track by will increase the performance instead of this we will Track by Department item do Department ID and here we have to bind the department ID in the property binding so item dot Department ID and while showing we need to display the department name so item dot Department name we have to show like this it will be there so this is the new for Loop we have in angular 17 so make sure like if you are working if you have created the angular 17 project so rather than going for the NG for try using the new things we have got let's just save and check if we are able to see the department in the department dropdown yes so here you can see we have got the department now coming back back so on the page load we have done first API call that is loading the department next is we have to show the employees list so let's see if we have created the employee service was created get employee method is also there now we can get we can integrate that service in our function so on NG on init implements on in it okay first we need to import it over here on the page Lo we are going to make that API call so I'm just going to implement on in it once we do that it will ask for NG on it to implement one more function load all employees right here I'm going to first again we need to create the employee service so private EMP Service employee service now here this EMP service dot get all employe this is the API call we are going to make do subscribe dot now let's see if we have created the object for the employee no I think so these are the properties we get let's check the get employees so these are the properties we get in the object so let's just copy this prop properties now let's create the interface for that in api. model. TS employed contacts so yeah we have already created so let's use this instead of result it will be this and with array because we are going to get no sorry uh this function is normally returning the API response so we have to add API response model do subscribe sorry Arrow function whatever the response we get that we need to store it also so let's create the variable where we are going to store the employee list colon now here we have to use the employee model is equal to I'm initializing with empty let's add the UT of this also so this do employee list is equal to rs. data and this we have to initiate on the NG so it will goes over here now whatever the employee list I got that will be in this variable so now this I have to bind it over here on the card so you can see I have created this cards on this call for I have to iterate so I'm going to use normal ng4 so let item of this variable let's remove this static one now inside this you can see here we have to display the employee name so here item dot employe name so see this is the benefit of uh creating models and the interface you get everything inell sense you don't you are you are not going to make the spelling mistake and everything right after that so after phone we have to show the phone number so item dot contact number here we have to show the email ID so item dot email ID uh after phone contact number here what we are going to show Department name so for Department name let's try something let's use the server icon and here we will show the department name so item do Department name okay that property is not available let's just add that D name let's initialize that and this department name we'll go over here and after at the last we have to show the the rule right let's just save all let's see on the page load we will make that API call and we can see the data so here you can see we have got the data available but now if you see here we are here we are going to add additional functionality if you see the viewport we are just able to see the sixth record because some space is getting used by this form so I we can hide this form on the button click and based on the requirement we will show it so for that here we will add a add button and here we will add a close button on close this will get hidden and this will take the whole space and on click of add this will get uh less space and the form will be visible so let's write that functionality so for that we are going to need one more variable is EMP form visible let's make it data type with Boolean initialize with false now this variable I'm going to use let me just now this call for means the form will be visible only if this variable is true right now if you see we won't get it let me just save the both file so since that varable is false so you can see we we are not able to see the form so if form is not visible we have to make this card full screen means instead of this call a we have to add call 12 so let's get rid of the sty static class now it will be dynamic so star NG class now the condition will be if this variable is true if if this variable is true then we have to add this class otherwise this class so if variable is true we have to add call it otherwise call Will means it will take the whole Space let's just see now so currently you can see we don't have the form visible so it is taking the full screen now in that we are going to need a button so let's just write a row call employee list will go over here here we will create a button BTN BN SM BN success it will be add new and on this button click we have to just change that variable value so click I'm just going to change the variable value to true so no need to what do we say create a function and do that on the HTML only I'm just changing it just like this in the second card also we are going to need the same structure over here also the title will go over here and it will be instead of add new it will be close button and in this we are going to just change the variable to false so let's just check the whole functionality let me just change the color name and it will be text and instead of success let's make it primary let just do the same thing over here text hyon end so that it will align to the right side now you here you can see we have the add new button so if we click on add new you can see the side form is visible and it has shrink the space like this this was the functionality and if we close it it is getting again the full WID right now let's just add a space over here because pt2 like that now we need to concentrate on the form so first we need to create the object right so this was a form we have already created the uh class of that so let's create the object first so here this was the employee obj data type will be employee with new initialize it because that is a class and we need to bind this employee object to our field so that will be over here so in all the elements we are going to bind NG model dot employee name now since we are using the NG model so obviously it makes necessary to import the forms module forms modu then that error will go away just like that I will just copy paste then we will change the properties mapping now here Department ID will be there password okay one more role drop down is there I will explain the role once we uh start implementing or hiding the things based on the role So currently in our application we are going to have three roles employee admin Department employees who are going to work on the tickets and the department head just to identify like this employee is a department head now R is there password now we have a male and a female drop down so here we need to add the name property so that they will act as a group here same thing here also same thing and and we need to bind the value also value male and here value will be female employee name employee name sorry this will be gender and this will be email ID contact number right so basic AP college basic we have created the object and that object we have binded to our for now on click of save we need to call our API so right click on Save EMP let's create this function in the service we need to write the API call function as well because we haven't written that so let's go to the employee service here we need to create an method which is going to be create employee AP call so that will be let's say create employee now AP end point also we are going to need so we will go to the constant just like the gate employee we are going to need a create employee constant constant always should be in the capital case just keep an a habit of that so this is the URL I will just copy paste so that I don't make the selling mistake this will go over here now in the employee service instead of get employee now we have to use create employee instead of gate this is going to be my post API so post and once we converted to post as post required two parameter object and the uh what do we say URL and this object we will pass it as a second parameter after comma so you can say this is my first URL and second will be the object now this create employee function we have to integrate on this button click so here this this do Employee Service dot create employee method and for this method we need to pass the object so this do employee object we need to pass we have to subscribe API response Arrow function and here we are going to add the if statement because uh result property will display like employees created success or not so that's why result. result if it is true we will show the alert like employee created success and once employees created success again we need to call the load employees method this and in the else we are going to show the errors so in else Block in alert only we will show the error so Rees do message whatever the message we get from the API that we are going to display so let's just save all and let's see if we are able to create the employee so on click of add new we get the form let's try suchin do we have suchin no let's add a DM mobile number email ID sechin d.com let's enter mail password let's enter 1122 33 let's enter a uh let's select the design as a department select role Let's uh such is going to be just the admin Department employees so I'm selecting admin Department employees now let's debug on click of save right so all the mobile numbers are dummy make sure you are also using the API don't enter your original mobile number just enter something dumy let's long click of save you can see create employe method is there and if you see the object this is the object which we have sent and in the response we have got it true and after the create employ you can see G all employees method is there so you can see the latest record created is available over here just like that we have created the we have done the Save Part just like that we have we can do edit and the delete part but as I have already covered the edit and the delete in the department list so you can do the same thing in the employee because I'm not going to repeat the same thing same kind of code will be there APS also there you can see create employee update employe and delete employee just on click of edit you need to integrate this employee this API get employee by ID or the same data you have in the array also so either you can use the API on click of edit or you can use the data from the for Loop now now we are going to do the rule based uh something like once user logged in this log out button also functionality which we have to do and we have three roles employee department head and the admin So based on that we are going to show and hide something so let's see the rules first so these are the three roles we have let's get it let's close everything now if you see the now bar if the role is let me just click on here if the role is department head right then only we will allow to see uh employee Department page because department head will have the what do we say authorization to create the new department and create the employee also any department head or or else we can add one more option let's say as a super admin you will only have the uh what do we say uh authorization to create new department and the employees let's make it super admin let's create a super admin first and we need the department also right so let's say super admin this is going to be Department uh we are not going to select the department head as it let's save department created success and you you here you can see super admin is created now let's go to employee let's create a rule let's create a user for the super super admins super admins can be let's say HR or anything Whoever has the functionality to create the new department and the employees so let's say Danish or let's create a simple one supercore admin this is going to be the name contact number just a dummy contact number email ID super admin atate gmail.com let's use dumy only May 22 33 44 select Department okay here the department is not coming because we have not created wait let's just select design super admin let's click on save something is wrong let's check what blocked why is it saying it is blocked on Save employee okay 500 it is coming let's check internal server error contact number yeah I think mobile number 1 one 1 1 22 221 one save employee yeah so mobile number was not correct uh no was not provided correctly now employees created right you can see let's update the department head also super admin update oh hope spining mistake was there let me just go to the database and create it as we haven't done the update thing I'm Direct updating to the database so super admin everywhere we have made the spelling mistake so this is my email ID and password is it 22 3345 now let's try to do the login and we will implement the authentication authorization for the using oot also so this is my email ID password is 22 3344 now I'm log I'm logging in let's remove the data now I'm trying to login with the super admin on click of login we will make the API call and the data also we have got that data we will stored in the local storage so here you can see the current rule is super admin now we will write the functionality like if the logged in rule logged in user role is super admin then only we will show the employee and the department page so let's write the code for that now the nowbar is in my layout component so let's go over here on the page load we have already read the data and that is in the log data now this variable log data will have the data uh sorry role also so employe so here we will add staring do rule now this anchor tag this lii only visible if the role is super admin so let's copy that role this is the role and we will add it over here same like that department Also let's just save and check currently we have Lo we are loging with the uh super admin only so that no it is not visible why okay we have got the error so since we have used the ngf again common model we have to add just get uh still because this is new so I'm I'm also not habitual right so now you can see employee and the department page is visible now on click of login on click of log we need to write that functionality also so at the end we have that log of button so here right let's write the click given on log off let's create this function on log off we have to navigate to the login page plus we have to clear the local storage data also right so here first we will create the local storage do remove item and the key name is nothing but the ticket data variable in which we have the data and after that we need to navigate it to the login page so we are going to need priv uh router service so router router and here after clearing the local storage this do router. navigate by URL and we have to navigate to the login page so login route let's just save and check if we are able to login so if I press the login button now you can see we are able to login right now on click of log off you can see we are successfully navigated to the login and if you check the locost we don't have the data but still if we just click on the back button still we are able to navigate since we are not logged in right but if you know the URL we are still able to go back this should not be possible unless user is logged in we should not have the access to access this page so to achieve this mean if user is not logged in we uh he should not have access to any of the page so to achieve this we have to implement the oard so let's go and implement the oard so guard file guard folder we had created so let's create the let's create the guard that will be can activate guard can activate guard will be responsible to before loading the page before loading the component it will run right means can activate uh like it is giving the permission so NG generate guard let Center it should ask like what kind of guard we need oh sorry I forgot the guard name so O then it is asking like which guard you need can activate can activate child can can deactivate and can match so let's go with the can activate so now here you can see can activate guard is there now here we simply need to write what do we say a functionality which will read the local storage now how do we know like user is logged in once user is logged in we are storing the logged in user data into local storage in your case you can store the data in key or session storage also but on the front end side we need to store the somewhere the data that user is logged in so here we have to first read the data so constant local data is equal to local storage dot gate item and we need to pass the key that is nothing but ticket data if local data is equal to is equal to sorry let's say not equal to null if it is not equal to none we will return true let's check the else else in return let's try to return return the false let's see what happens but normally I used to redirect to the login page from the out guard but let's check how it work ah sorry guard is created but we need to add this guard to our route also right so before that adding route in the app config we need to add it in the provider section how do we do that let me just find because in angular before angular version it was pretty simple let me just find that right so after we have created guard we just have to add the guard to the particular route so let's just add it to the dashboard page for now so it will we have created the can activate guard so here we unit toight can activate now guards can be multiple so that's why we have to pass it pass it inside the array so F guard guard name let's add the import now let's check it so if we are in the login page but if we know the URL and if we try to type it manually so now you can see we can cannot get anything but it is not loading the login page also why it is not loading the login page now it is loading so might be in the guard we have to ultimately redirect to the login page only so here let's inject router Outlets how do we inject inject and we have to in inject router or let me just see because we this is an nrow function so here we cannot what do we say create we do not have the Constructor so we cannot create the normal service object so let's just see what we have to search so inject we have already imported so here you just need to create a constant variable let's say with the name router and here you need to use the inject method and here you need to pass what you are going to inject so router is what we need and now in else block we are going to use router dot navigate by URL whatever the methods we used to get in the actual router that same only object we have created and we have to rate to the login page so let's just save and check if we are able to successfully navigate to the login page page let's try to enter dashboard so you can see we are again redirect to the login page but now if not dashboard let's try to because currently we have added can activate guard to the dashboard page only so let's try to uh insert the employee URL it will work because we haven't added the guard on the employee route so that will work so this is how the difference for this dashboard guard we have added the can activate guard so it will it will go to this it will read the local storage data even if it if it if it has the local data it will return true otherwise we are redirecting to the login page so that's why on the employee page we haven't added the guard so if user is still not logged in he is able to navigate right but in case of dashboard it is redirecting to the login page so now instead of adding it to the whole routes we have the parent so here you can add it let's just see now employee also will be work see now it has redirected to the login now let's try to login now let's uh super admin we have already tired so let's try with Jan at gmail 112233 so now I'm logged in with the normal rule let's check the role okay rle is empty let's try the let's try adding the roles employee so we can see the Jan is nothing but an employee let's try to log out again 1 2 2 3 three right is saying wrong credential password was incorrect 1111 okay password enter was incorrect 111111 login success So currently the role is employee only let's go application so see employee role is there now that rule based thing we have done if the role is employee we are showing just the ticket and the new tickets and the new ticket and if the role is super admin we are showing the admin and the employee So based on the logged in role we are showing some menus dependently this this is nothing but what we have cover as a rle based authentication again same thing you can Implement in the guards also there you can also write the same code but I'm just going to skip that now now next thing is the ticket part sorry new ticket first we will create the new ticket thing so this is the new ticket API create new ticket let's see the object so here you can see this is the object we have ticket ID is the primary key ticket number will be automatically generated so you don't have to send it employe ID means logged in employ ID we need to send we don't need to show the drop down and uh employee will select whoever the employee is logged in that will create the ticket then created dat we don't need to say it expected dat also we don't need to say it it will IPI will automatically add after 7 Days deadline to the particular ticket severity we have to add Department IDE so we have to add completion date this is also not needed assign to also not needed State we don't need to pass request detail because State and everything will be uh assigned from the back end so let's create the object for this let's copy let's go to that site convert Json to TS let's open it let's paste our model Json this is the diff model we have got let's copy now let's go to the API model. TS here we have to create the class of the particular ticket object export plus new picket right so these are the properties we have let's just initialize also you can see what are the properties we have in the new ticket object like that I have created the class and in the Constructor we have initialized that also so if you see assigned to is nothing but an ID to which us to which your employ ID this ticket is assigned so that's why I'm initializing with zero date I'm initializing with the new date Department ID again and employee ID and the ticket ID I'm initializing with zero because those are nothing but number after that we have to create the form so next part is we have to create a new ticket now let's see the object what do we have to send to create new ticket so at the end we have the create new ticket API so here if you see we have to send the employed employ is nothing but logged in user ID whoever the employe is logged in that ID we need to send severity we can create a static drop down with low medium and high Department ID like for which department we are raising the ticket then State this state actually we don't have to send it on from the API side it is going to be by default state will be unassigned then uh once that department employees start working on the ticket then it will be in progress like that and request detail whatever the details we have to provide in that particular ticket so since we had we have created the new ticket component but if we know like just some fields are there like only four or five fields are there in the new ticket so rather than using this component I will do the same thing over here in the new tickets component so let me just close everything tickets component I will create the structure so row do call let's say 8 or let's make it 12 why I will explain in each component in each component we are trying to accomplish the different UI whatever we can so that in a single project we will cover as much as different approaches for the crow so that you also can know like what are the various scenarios by which we can do the crowd operation so in the tickets component we are going to do uh the same thing with model popup so here then card card header. BG success now here let's say ticket now this component is going to be used to all the rules ticket list then we need card body and here we are going to show the various tickets we have created uh now for Ticket showing we can use the card only so as we have used the same thing in the employee to display the list I'm just going to copy paste that so this was the row let's copy this let's paste it over here now we just remove this let's remove the bindings also right like this so here first we need to open the model po so let's go to the boot boot 5 since we have installed the boot 5 so we need the boot 5 what do we say model popup code so W3 School bootstrap and we need the model popup code so let's go over here this is the basic code for boot 5 model let's put it at the end and here let's say new ticket and in in model body we are going to have the form let's remove the remaining things now on the button click so now we had the card right so here again we need to create one row column structure let me just create that row. call 6 and here we are going to add add this label and in remaining call six I'm going to have a button class BTN BTN [Music] SM BTN primary and here I will say new ticket now on click of this new button we have to open the model P let me just show you my button is not visible okay BN let's add a text end class so that it will end it will appear at the end right now on click of this new ticket we have to open that model popup so let's write the code for that now to open the model popup we have so many different things as boot 5 initially supports the JavaScript code so you don't need to write the custom code but obviously on the close button and everything we are going to do some codee so that's why I'm using the manual approach so I'm just creating open ticket model function now on this button click I'm going to call this function now in this function we are going to select that particular ID and try to open it so the model ID is let's say ticket model this is my ID to the my to my model right now here we have to write con model is equal to document dog element instead of get creating document. G element you can create a view chat also but just to keep the video uh what do we say on easy level so that everyone can understand I'm using the normal JavaScript method and here we have to pass the model ID that is ticket model over here and we just have to add a null check like if model is not equal to null then we will open it so model do style do display property is equal to block we have to show block means we are just adding a dynamic CSS and just like that we need a close function also so close model close and here we will just add a CSS as none and this close model ticket we have to add on this cross button click right so let's just test if it is working fine let's file save all now on click of new ticket you can see model popup is opening and now if I click on close that that popup is also getting hidden now here we have to design a form so let's just design a form through call six label now first let's see the API what employe id we are going to read from the local storage and then we are going to ass means logged in user logged in employ ID we need to send sity so let's check select sity and here we are going to have a drop down so select class form select and here we are going to have option let's say first is low [Music] [Music] medium and high any any option you can have doesn't matter and one placeholder option we will take it with the value empty select so our sity drop down is done after that what do we need so we need Department ID like for which department we are creating this ticket so here we need to show the department dropdown so before this we will just add a dropdown and in employee also we have already created the employee dropdown so let's make use of that code so here you can see we have already done that so I been just copy pasting the same code select Department and we need the AP call also so first we need to create the object. department service because the department in the department service we already had that API call looks at the input after that we are going to create this observable just like I'm copy pasting whatever we have did so that we don't have to just waste time creating it and in the Constructor we need to call this observable we need to add and the model also we need to import like that so on the page load we will get the data now it is giving error because we have to add the forms model and everything so forms model and common model also we are going to need need so let's check if we are some error is there let's check what is the okay NG model error will be there let's just remove that for no because we have not created the object yet let's just see if drop down is coming properly or not yes so drop down is coming we need one option that will be static so let's just copy this option and put it over here so select department and the select sity is done after that what do we need is State also it is going to be automatic right from the API side it is going to be created request detail so just one text area why the error forget it so after this row we are going to create one more row all 12 and here we are we are going to have a label enter your dat ticket details just a text box or text area where user is going to employe is going to provide all the details whatever like what things you need and everything just like that we are going to add in the text area let's say Row three rows let's add a placeholder enter details now just the simple form is there first employe is going to select the department he will select the severity of the ticket and he will enter mention the details what he need after that first we have to create the object so let's go over there and let's copy this object now in the app model we are not creating any we are not creating all the variables with any we have created the models and everything so here I'm creating one more model so export class new ticket let's remove these things let's replace this with semicolon number and this with string after that we need to initialize things in the Constructor so this dot Department ID let's initialize with zero employ let's initialize with zero request detail with empty as it's a string sity as it's a string so initialize with empty and last one state also with empty we don't have to bind it duplicate identifier we have created okay new ticket obj I think in the last sorry I'm I'm recording this in multiple videos so I have changed the API so previously this was the T tap object but now it is this so I only forget this but this object this ticket object we are going to use so let's go to ticket component let's create the object nowe ticket obj colon this is equal to new ticket object let's add the import now this object we need to bind to our form so on the first that is Select Department let's add NG model dot Department ID here we need to B then severity so here instead of Department ID we have to bind the seity let's copy and the last one is text area with details request details that's it now here uh beside the close button we will need the save button so instead of Danger let's add a success one model display let's remove this and here it will be create ticket now on this button click we are going to call one function so let's create that click on create ticket let's copy let's create the function for now now the APA call is object we have created that object we have bind to the form and on button click we have created one function also now let's go to the service now we have to create a uh in Employee Service I will create I'm not going to create one more service like ticket service because we don't have that much API call so here only I'm going to create so the function name create new ticket the object will be ticket new ticket object let's check the API call create new ticket now the API URL here it we have we are using the constant file so let's go over here newcore ticket and the value will be create new ticket whatever the API endpoint name is comma Now in here instead of creating employee new ticket is there remaining things will be same now into ticket component we have to write the APA call so first we have to create the object of Employee Service so because there we have created the service function employee service so here this EMP service dot create new ticket and for this we need to send the objects so ticket object and we need to write the Subscribe API response model here we need to write if rs. result if it is true then we will show like alert ticket created success and in else we will show just the error R message right let's just test if AP if te it is getting created successfully or not then we will discuss like the gate API call what things we have to do over there now if I click on new ticket let's select the department let's select uh let's say I'm raising a ticket for the but it is coming two times let me just check one more time here the form control class is remaining so let's just add that class form ion control let me just check the database departments are not coming proper so API are free so someone must have added the wrong Department let me just change it properly Ticket Master Department this is the table which we are using UA it developer yeah here departments are coming proper but here it is not coming proper let's say why why it is saying the old one only because let me just log in with the super admin again sorry so my bad in Department service I had the wrong uh constant name instead of get employee I need get department so that's why I corrected it now you can see we'll get the proper departments now so here let's uh to just see like uh what data we have we need to raise a ticket where proper employees also there let's say get Department let me just find it properly so I have just find out so in hrr Department uh employees also there so let's create a ticket for this hrr department so let's go over here let's select the department as hrr let's select seity as low I need let's say he's asking for pay slip for the current month January month now on click of create ticket we should see one API call on click on create you can see one API call is there and it is saying like created ticket created success Also let's check the API response so here you can see and the ticket number is 78 is also there uh once more you can see ticket number we haven't send the ticket number but here you can see ticket number is automatically generated state is also there by default when someone creates a ticket it state will be undefined sorry unassigned now the ticket is there but we I'm logged in as an employee so I need to see what are the tickets I have created so let's check the API which I have get tickets created by EMP ID let's check my EMP ID employee ID oh we haven't send the employed because I have not added the validation so still ticket is Creer so you can see employ is not created because on the page load also I I discussed but I have not send it right so now here we need to read the local storage data and whatever the employee ID is there that we need to assign into our ticket object so let's write that code in the layout component we already had done that so let me just copy this into ticket component in the Constructor I'm writing that code now in ticket object dot employee ID we have passed that and employe ID same thing will be over here now let's try one more time now this time data will be going proper new ticket let's rate to HR let's with minimum new pay slip for December month this is the ticket ticket detail I'm adding let's click on create ticket ticket created successfully now if we check you can see employed is going as three let's check this API if we are getting the tickets created by this particular employee it is saying error employ three execute error is 500 why get tickets created by EMP EMP is equal to three which we have send let's check employees present or not okay so I think the employe ID is not present let's me try to login again let's try to log in with the existing employee tick it employees are there why it is saying employe doesn't exist department is not there got it so I might have deleted the department let's add a 98 to this department I haven't added the for in key yet that's why the data mismatch will be there let let's try again three still it is 500 only so I need to check just give me some time to check this so in store procedure something was wrong so I have corrected it now if we click if we pass the employee ID 3 so we we get we will get the tickets created by this particular employee So currently only one ticket is there let's try by creating one more let's select economical Department let's select no need ply report let's create it it is taking so much time yeah done let's try to execute again now we should see the two tickets so you can see now we can see the tickets created by this particular employee now we just have to integrate this let's add this into our constant file the API endpoint so let's go to the constant file the constant name will be get tickets created by EMP we need to pass this constant over there then method name along with the parameter now in the employee service now we have to create the gate API so I'm just copy pasting this it will go over here get tickets by EMP and for this function we are going to pass the employ ID so it will need a parameter so EMP ID data type will be number and now instead of get employ it will be get tickets created by ump ID plus EMP ID we need to bind so that Dynamic URL will be formed along with EMP ID now this function we have to call on the page load so in the tickets component let's implement the on in it let's implement and once we do that we need to implement andj in it also let's create a function get tickets created by EMP now here this do Employee Service do get tickets created by MP ID and here we need to send the employ ID so employ ID nothing but this so this I will send it over here dot subscribe the response is obviously response model API response model then Arrow function and whatever the tickets we get whatever the data we get from this API that we need to store so let's create one more variable tickets list colon let's create the object so this is the object we are going to get this is I think compared contact number let's check the model we already had created uh no here some data was not present let's add contact number string then we have employee name Department name is also there string this is just the old model I have created we were not using it so I'm using it now data type [Music] string and the last one is assign to employee ID right let's initialize this properties so this dot assign to MP is equal Mt contact number is equal to empty employe is equal to Mt right now this object instead of new ticket let's rename it ticket list this way we will add it over here and it is going to be array let's initialize that with empty array let's add the import also for this now whatever the data we get from this API that we will store into this variable rs. data and this function we have to call on the page load so on n on init we will trigger it now whatever the data we get that we got into store we have stored into ticket list so this we will use on the card to itate so this was the card so here on call for we have to integrate it to Star ng4 let ticket of ticket list instead of this you can use atate for also there also we have Track by in NG also we have Track by so same thing right now here we have to show the ticket uh created by name or let's in the card header we will show the ticket number so ticket dot ticket number we will show over here then what do we say what what data we are getting current state also we can show so State then what else is there contact number we already know because I am the logged in employee so I don't need to show the contact number Department name like to which department I have raised the ticket so here I will show ticket do Department name then created date when it was created so this will I will show over here ticket do created date it's a date so I will add the date pipe with format DD mmm y1 then what else we need currently it is not assigned because we have just created a ticket so it is not assigned to anyone so expected ined by default you can see on the 22nd we have created so by default uh API from API side it has added 29 as a expected end dat so let's show this also uh instead of over here let's show that create date first over here and expected date over here so that date will be in a single row and here we will show sorry this should be over here and here we will show the department name what else we can show State already we have shown severity is missing so ticket do severity let's save here we haven't saved the other files so let's save this now on the page load we should see the tickets error is [Music] not save all see on the page load we have done the API call and you can see the tickets created by us here un assigned is there why we have shown oh here we need to show the ticket number so here you can see we can we can see the ticket number uh start date expected end date let's just instead of icon now we should show the label so label start created date and the remaining was the next was ended sorry expected completion date so created date was this expected end date was this let's add a br tag from the date will come in the next line right like this now we have to show the assign name also now if you see the API if the request is not assigned to anyone yet so the state is unassigned so we can show the state because currently we have not shown the state anywhere so after this let's create a row do column 6 ticket status State we just add a br tag and here we will show ticket state so ticket do state now one more column I'm copy pasting if ticket is assigned here I will be uh showing the name so assign two but here we need to add the condition so that is if assigned to is not null so if you can see here assigned to employee is coming as null because it is not assigned to it so ticket dot assign to if not equal to null then only we will show the assign to so let's just save and check so that's it everything we have done so you can see it is unassigned just add up addding so we have created the ticket also and that ticket we have shown over here also now this ticket first as as we have discussed in the starting like once employee created the ticket for the particular Department that ticket will go to the head of that department then he will assign it to someone else now the same component we will use for the department head also so let's check the department head of this particular department so let's select let's try for the hrr so hrr was having 110 ID and the department head ID was 90 let's check the 90 90 was 90 employee ID and the head was uh vikii so let's copy this now let's try to log in with the department head now we are doing the actual phase where the processing will be and whole flow you can understand password is 1 2 3 4 5 56 login now logged in success so now in the dashboard we can see the department head is logged in let me just close all first now if in the here also we need to write some coding like if uh what do we say local data so in local data here I'm just adding a check if local data do rule oh so we have not passed that let me just create one more variable logged data col any and whatever the data we have got in from the local storage that I will assign it over here this I will put over here and this I will use it over here Ru is equal to is equal to let's see what data we have got in the local storage for this particular user what is the role oh so sorry in Gate API we are not getting the role let me just modify because in Gate API we need the rule right based on that role we are going to do some API changes so the login API let me just change the API quickly sorry I was checking something else so here in the ticket data we have got role as a department head so let's write the code for that if the logged in role is department head we need to call another API just like that again LP will be there with if logged in role is employee and if the logged in role is employee we will trigger this AP otherwise instead of writing code over here we will write that code in n on because from here we are triggering the API code so this will go over here if the logged in role is employee means normal employee so we will call this function that is get tickets created by EMP ID but if the logged in role is department head so we have another API which is if me just get you that API get new tickets so this is the API which will get us the new tickets created for the particular Department if we logged in with the department head so here we need to send the department head employee ID so the department head ID was 90 let's try that 90 over here execute so you can see we have got two tickets created one one was one was created by super admin and one is created by Jan so this API we have to call so let's copy this let's add it in the constant get new tickets and this will go over there now in service also we have to create one API call so just like that I will just copy it and here get new tickets get new tickets now this function we have to call so just like in tiet component just like this function we have to create one more function that will be get new tickets new unassigned tickets that will make more sense and here we need to pass the logged in employe ID so logged in employ ID uh we are getting that in the log data so this we can use over here and whatever the data we are going to get that will we will store in the ticket list only so this function we will call in the first if statement if logged in role is department head then we will call this so now if we save now first we need to login with the particular 90 email ID yeah that we have already done so in the network if we go to the tickets page no so again that employe why let's check department head is there let's try to find save all we should see the other API call but let's see why it is not happening Cates component let's add it over here let's [Music] reload so current the logged in role is department head so obviously it should go over here okay so I think we have not changed it over here same AP call is there so here get new tickets AP call should be there now it will call the perfect AP so you can see two tickets are there which are unassigned now if the logged in rule is department head then we should show the assign button so this will go over here and ticket state is there now assign to instead of this assign to we will show the employees for his particular Department because then he will assign it so here I'm creating one drop down we don't need the ngf plus um select in this dropdown we are going to show the all the employees of his Department only whatever the department he represent what are the employees working for him that department that employees we will show it over here I'm just selecting option now we need to load the employees for the particular department so we have one API for that so if we go at the top get employees by Department ID so what was the department uh department number 110 so let's check that write out 110 now with this a we should get all the employees working for this department so here you can see only two employees are there an Anita and which are working for the 110 department now this AP call we need to make so let's copy again we have to go to go to the constant get employes by Department this will go over there now here in the employee service first we need to make that AP call function get employee by department so this will be Department ID get employees by Department ID and this department ID we have to send it over here now ingate component we need to create one more function get Department employees and here we need to send the department ID so Department ID we have got in the local storage let's check the local storage so here you can see the department ID whatever the department this particular logged in user is so this. log data dot Department ID we need to send so DPT ID let's create one more variable to hold the department employees DPT employee list colon employee model whatever the response we get that we will store into this variable now this function get Department employees should be call if the role is department head only so here or we need to yeah only here only now whatever the data we have got that we are storing into this variable now this I will bind it over here select employee and here option star ng4 let EMP of Department list then value we need to buy Dynamic EMP do employee ID and in here we need to show the employee name so mp. employee name we have to show and this the ticket let's say in the that particular API we are going to get the assigned to employ ID or not assigned to okay so here you can see we are not only we are getting the tickets which are new so assigned to property is not coming over here but we need assign to ID over here because that's only okay so for now let's click on select employee will be there let's just save and check till now then I will explain the next flow now here you can see we have two tickets which are in currently in the unassigned state now if I select any employee I'm not getting the data why is it let's check one more time is it not saved on Saved online so on the page load we okay here it is something is wrong why we have person 20 get employees by Department somewhere space might be there so let's check where yeah here it was a space if you get some space now so it will be replaced by perent 20 so then yes now you can see now you can see over here these are the various employees working in this particular Department under under the logged in user wikii now so let's say we have to assign this ticket to particular employee let's say I want to assign it so we have an API so let's check that API assigned request so this is the API which allow us to assign the particular API particular ticket to the particular employees so this is the post API this is the object so let's go to our here in the employee service I will create one more API call because this is the this is the API which we have to use to assign it assign the ticket so let's just execute I need just the URL so I'm just making it so assign ticket so let's go to constant assign ticket r on assign ticket take it now in the employee service again I will create the API call assign ticket here we have to use assign ticket and we we need to send the object object I'm keeping it as any just two fields are there so I'm not creating uh model and everything now once we change the drop down on the employee change we need to call that API with the selected employee so here change AP I'm writing uh assign EMP function I'm creating and here I will send dollar event dot Target dot value let's try I just need to get the selected employee EMP ID number let's add a debugger first to check like employ ID we we are getting or not then we will write the API call object is possibly none 43 there it is part three you added the null check still it is giving value does not exist on type Target let's just try to send the event only then here we will find event is not assignable to type number so here instead of any let's make it any let's find it now now let's open the console and we have to check on the drop down change if we are able to send the employee ID so let's select Isha and here we are getting the complete event event do current Target event EMP id. Target dot value yeah so you can see we are getting the selected employe ID so this we have to use con now so instead of creating this small object because we just have two field in the assign right so I can create the object or in the function only with the local variable constant obj is equal to this and assign to this we have to use the employ ID how we have got that from the event so EMP do target. value so this will over here and ticket ID we need to send so that that we have second parameter we know that this is going to be number and once we call this function here also we need to pass the ticket ID so ticket do ticket ID we need to send like that and once the object is created this ticket ID we have to assign it over here so object is complete now we have to make this do Employee Service dot assign ticket we need to pass the object so object is nothing but this local object and do subscribe result po API response you can add an if statement if result dot result is true then we can show alert like ticket ticket assigned successfully anys we will show the error whatever we get from the API only so alert rs. message will be over here let's just save and check everything right now if we let's say this ticket which is 31 let's try to assign it to Isha so now ticket assign successfully is done so here you can see in the payload we have got the assigned to is 34 5105 and ticket ID is also there now if we refresh the this ticket won't come here because this is not this is already assigned so only one ticket which is not assigned it will come so let's refresh so only you can see one ticket is there which is not assigned so because we have called the API that is new ticket so new ticket API will return only tickets which are not assigned yet so like this again some things are remaining like if we logged in with the particular employee which is having the department role so that for that Lo let's say if we login with Isha so Isha should see the tickets assigned to her that we will complete next and here we need to create one more button if we have to if I have to see all the tickets which are where what is the status and everything so for that here I will add a button that is get all tickets so there we will show all the tickets so but I need to write that APF first so I will write that AP and I will continue that part again so we have assigned one ticket to Isha now let's try to login with Isha so she could see the ticket assigned to her so let's check the login detail of Isa so this is the email ID let's try to log off email ID the password is 1111 login login success now let's check the data in the local storage for this application we have created three roles now the role of Isa is ADD Department employees means she is the one who is going to work on the tickets created by the normal employee so in the tickets component because one component only we are using sorry so one component only we are using for all the different roles so here again we need to add one more check so L sa if this. loal data do roll equal to equal to this role then we have to call another ticket which is let me just show you on the Swagger that that ticket I mean that role will be get assigned ticket by get assigned tickets by EMP ID So currently EMP ID is 105 so let's check if this API is working 105 we need to send one5 right so you can see one ticket was assigned to her so that ticket we are able to see so this is the API which is which is which is getting the tickets assigned to that particular employee so let's copy this and we need to put it into the [Music] constant get assigned tickets let's create function in the employee service just like this get assigned tickets and here we need to send the EMP ID here get assigned tickets and here we need to send the employee ID now in the service we have created the API call function now in the component we need to create that API call just like the above one so let's copy paste this now this function will get assigned tickets so let's copy let's call this function over here so in all the three AP call let's say it is new assigned ticket get tickets by or get assign ticket we are storing the data into the same variable so we don't have to create the uh separate variable to store the list because same data we are getting now let's just check we should see the tickets assigned to her continue in the network tab we should see tickets no still that API is missing okay here also we need change get assigned tickets and here we need to send the logged in Ro data so logged in object EMP ID let's say one more time now here you can see we have successfully called the gate assigned tickets by the EMP ID and this is the ticket we are got now if the role is what do we say admin employee so we don't need to show this drop down right so let's hide that so let's copy this now on the drop down we need to hide that so star NG if so now this will be visible this select drop down will be visible only if the rule is super admin so role is sorry department head so this will go over here so only the select drop down select employee drop down only be visible to this particular role let just save right now once I see the assigned ticket to myself I will be start working on it so we have one API which we have to call on the start ticket let me show you that start ticket and this is again post API oh this should not be the post API this should be the G API but let it be so I need to send the ID so the ticket ID I need to send right so ticket ID which we need to send so let's create this uh constant and API call first so start ticket even if it is a post API we don't have an object but you can send the empty object since I have created this with the post so again we have to go to the constant start ticket just like that close ticket also we are going to need so I'm just copy pasting let's see the APA call close ticket instead of start it will be close now in the employee service also we need to create that this is post API so let's make it post but we don't have any object but we we have to send the object so we can send an empty object like this but in the URL we need to send that employee ID so start ticket and here we will be sending the ticket ID so just like that over here this will be close ticket here start ticket apaa call entry and the ticket ID and this will be Clos ticket right so AP call is also ready now here we just need to create functions so just like that I will create the function because we are going to get the two and the false so this will be start ticket only ticket ID parameter will be there and this will be start ticket and here we will send the ticket ID ticket status change just like that close ticket will be there this will be closed ticket and here will be close ticket now just make attention uh two functions are there start ticket and close ticket now over here we have hide this right but we will create one more column six and and this D will be only visible for the admin Department employee role it will just add that role over there admin Department employee one more D I have created which will be visible only for the Department role and now here we need to check the status I'm creating buttons over here class BN BN success and just like that one more button that will be danger it will be close ticket and this will be start ticket and now either of the one button will be visible now that will be condition base so condition base as in if ticket do state star NG if so if we see the data current Data Ticket state is assigned so if the ticket state is assigned means it is assigned state but if it is in progress then we have to show the close button so that will be in progress so that is like let me just get the proper word start ticket once we start the ticket we make the ticket straight within progress and one more button we will be show once it is closed okay so ticket we are already showing so not necessary and now on click of start button we have to call that API the first function AP call we need to call that is start ticket and we need to pass the ticket ID so this and we need to pass the ticket ID so ticket do tiary because the same for Loop is going over there right like that let's copy let's paste and just drop this it will be close so let's just save and check now if you can see current sticket status is assigned so that's why I'm getting the uh what do we say button as start ticket now once we start the ticket again we need to load the data but we cannot load we cannot call the on it again so let's remove this code and put it inside load grid function and this function we will call on the NG I will explain why because once you start and the close again you need to call this function so if you put this code in the it you cannot initiate again so I will copy this put it over here so that I can see the latest status or here also let just save and check so currently I just have one ticket so I will just start on that okay we have got error because in the URL you can see startet H is missing so that's because in the constant I might have forgot right so we need to just get me the ID proper id id only so it should be like this let's sa and check it one more time now it should work fine now if I click on start ticket you can see ID is also proper ticket status change and now you can see once we start the ticket it is the button next button is coming as closed ticket now if I close on the ticket that ticket will get closed but before that uh so this ticket was created by okay here we need to show the tickets created like who has created the ticket so yes employee name is get we are getting so let's show the employee name also after this row. call 6 let's show ticket dot employee name and after that we will show the ticket contact number also created by employee oh something is employee name is also there let's just tiate I just need to change the model data this. employee name empty now I can use the employee name let's just save and check super admin is coming but mobile number is not coming why so from API side I'm not getting the mobile number in the get all ticket okay so let it be so employee name is coming because this ticket was created by super admin now let's try so the flow is like employee has created ticket that ticket got to the department head department head then assigned that ticket to Isha then in isha's login we can see the ticket assigned to us then I can start on that ticket work once I complete the working of that ticket then I can close it also so if I click on close ticket I make that e call ticket status change now if I refresh I cannot see that button because ticket status is closed not the start button not the close button I able to see so this was the complete flow where I can uh if I login with the employee I can create the ticket that that ticket will will go to the department head department head will assign that ticket to particular employee of his Department then that particular employee if logged in then he can see the assigned ticket to him then he can start working on on that once he done working on that he can close this again so basic flow is completed now just the work remaining is the dashboard so according to the rules we should show the different different dashboard like if I'm the department employee I should see the assigned ticket open ticket close ticket like that if I'm the employee who can create the ticket I should see the total number of tickets I have created Total in progress ticket unassigned ticket like that and if I'm the department head I should see the new tickets CR and the all everything uh the dates and dat but the dashboard tickets are not ready yet so so that's why I'm skipping that part but once you see that video once you see this video you will see the ticket uh that APS also over here at the top all the dashboard APS so you can perform that will be just the get API you can just get the data and you can show the data according to the different rules so that's it with the current video I hope the whole flow is easy to you just the last part was somewhat difficult but the uh remaining part is very easy just the basic current operation we have did so that's it with the current video please do like and subscribe

Channel: LEARNING PARTNER

Views: 4,248

Keywords: angular 17 projects, angular 17, angular 17 project, ticket tool angular, angular mini project, angular project from scratch, angular project for beginners, ticket system project, ticketing system angular, ticket app angular, ticket tool in angular, ticketing tool in angular, angular major project, angular project, angular spring boot project, angular project tutorial, angular ecommerce project, angular tutorial, angular tutorial for beginners, angular 17 tutorial, angular

Id: bklIPjR7BDo

Length: 203min 55sec (12235 seconds)

Published: Thu Feb 01 2024