Full Employee Management - Laravel Filament Tutorial - Laravel 9 Tutorial

okay friends so in this video i'm going to show you what we are going to build with a laravel and filament php i have these notes i get a document from someone who has applied for a job and and he needs to build this employee management with the laravel and vgs and i created that project a year ago and i convert that document in these notes here so what we need we need on the sidebar of our admin area we need the dashboard employee management system management the system management as you can see is going to be a group which has country state city and department and also we need the user management which is going to be group with only the user for the authentication we need user will be able to login using email and password and three failed attempt will lock the user for 5 minutes now for user management we have create update and delete users change facebook password and search user by username and email we have the employee management a list of employees with search and filter by name and department we have create update and delete employees okay system management is going to be country state city and department and all for them we need a table to display all of them of the data and with search and also create update and delete and the last one is going to be create an endpoint api endpoint to list all employees order by last name and also we have the fields we need for the migrations okay so here employee country state city and department good now here is our project our finished project we have the dashboard and here we have we just this two is coming by default when we installed the filament but these three here are custom so we have all employees we display the count of employees we have uk employees and us employees now if we go to the employees we display also the widgets for the employees so all uk and us the same we have here in the dashboard and we have a table with search and with filter by department so if i filter only by react.js you can see also file by ug view js and reset filters here we can search and so on edit and also delete the same thing for the country display the table with a country code id name and create a dot search create new one edit and delete a country now here in the country i have also displayed the employees belong to this country and also the states belong to this country we can directly edit the employee in here and also create new employee right here now the same for the states we have a table with search we can delete we can edit and we can i displayed all the employees belong to this state and all the cities belong to this state and we can create and delete create an edit employees here or cities the same thing for the cities we display all the employees belong to this city and the departments and we have users here right now we have two users we display a table searched by name and by email so here we have user management create update and delete change password and search by username and email so if i search by test emails at test as you can see we have only that and we can create a new user or edit the user or change the password as well and that's it the project and also let's open the insomnia just to show you that the last feature we need which is this create api endpoint and list all employees order by last name and here it is the endpoint api employees and we get all the data here okay friends that's it the project i hope you is going to like it and don't forget to subscribe and like the video all the best and see you in the next one hello friends welcome in this video we are going to create the project but before that i'm going to show you the document i have created here so what we need for our project we need the employees modeling migration countries state city and department and on the sidebar of our project we need the dashboard the employee management we need the system management and this is going to be group system management and inside this group we need to have the country state city and department another group is for user management and here we have only the user now there we can create update and delete change the password and search users by username and email in the email employee management we need to have a list of employees so a table with employees with search and filter by name and department and also the crowd create update and delete in the in the system management we need i need to say here system management here we need country list of countries with so table of countries with search and create update and delete the same for state city and department so as i said in this video we are going to create the project and here we have create we need to create a project install breeze install filament and create the database first i'm going to open the item and create the laravel project and inside the sites directory here i'm going to say laravel new and i'm going to name it filament employees okay next i'm going to install breeze so for that let's go to the laravel documentation and in the starter kits we have we can install breeze by running the composer require laravel slash breeze director's dev so let's copy that command let's see the in the filament employees and paste that command in next we need to run the php artisan breeze installed okay breeze colon install and we need to run the npm installed and npm run dev so npm install and also the mpm run dev and also the php artisan migrate for that we need to create the database so let's say create project install breeze now we need only the install filaments let's open the table plus okay open the and create new database and i'm going to create to give it a name filament underscore employees now by default there are value when we create the project so we give the name filament dash employees and by default builder will give it us as name as a database the project name but with underscore open this one and now let's run the php artisan migrate php artisan migrate hit enter and everything's okay then last one we need to install the breeze the filament sorry we need to install filament and create a new user so go to the documentation of filament php composer require filament filament and the version 2 right now okay very good now let's create the user php artisan make filament user i'm going to name it admin hit enter admin at admin.com and give it the password okay i have give it a start to the filament of course now let's open this project in our browser filament employees okay here it is let's go in the admin area admin and login so login as admin admin.com and give it the password okay here it is or admin from filament now that's it for this video i hope you like and if you like don't forget to subscribe to my channel and like the video share with your friends and see you in the next one all the best friends hello friends welcome now in this video i'm going to create a github repository for our project also i'm going to fix login attempts because in the previous project when we created a year ago we had this authentication the user will be able to log in using email and password and that's okay because it's coming by default with laravel breeze and we have three failed attempt will lock the user for five minutes but by default with a laravel we have five fate attempt and we lock the user for one minute 60 seconds so we need to change that and next we are going to create the model and migrations okay models and migration very good now let's go and create the github repository first i have opened my github account and let's create a new repository and i'm going to name it filament employees let's go and create the repository and let's copy that open the terminal and paste that in git init git add and let's say git add all here and i'm going to change the username for me okay now let's say git commit good git branch okay get a remote and i want to change this because i have too many github accounts so let's say laraveler and now git push push come here and refresh here is our element employees project okay now we fix the first one next we need to fix the login attempt okay let's open the vs code and inside the app http controllers we have this out controller here a folder which has the controllers we need this is come because we have installed the breeze package and if i go in the authenticated session controller here we have this create method which is going to return the login blade and here we have the store which accept the login requests and say request authenticate so it's calling the request authenticate so if i open now the login request we have the authorized rules and we have the authenticate method now in this authenticate method we see first is causing this uh ensure is not rate limited and if i go down here it is and this ensure is not rate limited is checking for too many attempts from the rate limiter facade so if i open this one we have the limiters cash and too many attempts is here so accept the key and max attempts okay so login request accept the key and the max attempt so max attempts we added here five but for us we need uh three attempts so we need to change that to three okay and we check for that and we say here rate limiter hit this throttle key now this hit accept the key and also the seconds you can see here and by default is 60 so let's change that to uh five minutes so which is [Music] three five zero in the seconds so let's save that and let's close everything and let's check now how it's going to work come here hard refresh go to the login and i'm going to login as a test user we don't have that so just try one two three and now we have please try again in many seconds too many seconds okay now the next thing is to create the models and migration what we need for middle semantics we need the employees countries state city and department i'm going to create first the country because in the employees you can see we have the country id and if we create first the employees the timestamp the migrations has the timestamp and is going to run first the employee but the employee has the country id and this is coming after the employees so it's going to crash so first we need to create the countries and after the in the last the employees so let's open the terminal and say php artisan make model and why i have something like this sorry for that php artisan make model and let's say country dash m for migration very good enter next one is the state okay city and department okay city department now very good and the last one is going to be the employee hit enter very good now let's go and see why we have them open we have vendor so in the models you can see we have city country department employee and the state and also in the database we have all the database countries state city department and employees let's fix them in the next video so we need to add all these fields for the employees for country we have only the country called under name and for the state we have the name country id and i don't know so here we don't have the relationship we don't specify the relationship but as we can see the employees has department id so the department can have many employees and the employee i'm going to create that is going to belong to the department the same for the city and state and the country and also the country can has many employees and also the country can has many states and the state is going to belong to the country okay now the same for the city the city is going to belong to the state and the city can has many employees now for the department the apartment can have many employees only just that and also the employee can belong to the department it belongs to the city it's going to belong to the state and the country okay so that's going to be for the next video we are going to fix the relationship and also add the fields in the migrations okay friends if you like a content like this don't forget to subscribe to my channel and see you in the next video all the best hello friends welcome in this video we are going to create the relationships between the models and also working with migrations so we need to add fields to the migrations but let's start with migration first so i'm going to open the notes in here and the vs code right here and it's going in the database migration open the migration and this one is country countries has the country code and the name so let's come here and let's say dollar sign table for the country code i'm going to add a char and say country code okay next one we have the name and for the name i'm going to add the string so the last sign table string and let's say name here okay save and as you can see i have autocomplete because i have installed the extension let me check tab 9. so this extension this allow me to how to complete the code here okay now let's go in the next one which is state and in the state we need the country id and the name for country id i'm going to add table origin id and add country id here and also say constraint and i want when we delete the country i want to delete also the the state belong to the country somewhere say on uh cascade on delete like this okay and now add the name dollar sign table string for the name okay next one is the city now for the city we need the state id and the name so let's say dota sign table for gene id for the state id say constraint and also cascade on delete as well and the name dollar sign table string order name good save open another one which is the departments for department we need only the name assume as we can see here so let's say assign table string name okay save it close and now let's open the employees here we have the all the fields so first name last name address i'm going to add first the relationship so let's say here dollar sign table origin id country id ok say constraint and cascade on delete okay now let's copy that duplicate it change the country to be state id okay we have the state city and let's sit here city like this okay and the department so duplicate again change the state to b city and one more time to be this is going to be city and this one is going to be department okay now we have all the relationship let's add the first name last name address so the assigned table i'm going to say string for them string for the first and i'm going to say first underscore name dollar sign table string last name very good now we need the address to assign table string address okay next one is the zip code birthdate and date hired so let's say for the zip code i'm going to say jar and add zip underscore code okay next one is the birth date it's going to be date table date and i'm going to say birth underscore date like this or the same so let's say the assigned table date and this one is for the date hired and i think we are okay let's save this and let's run the artisan so artisan migrate hit enter and we have the table series in our database if i open the table plus okay open this one and we have filament employees open that and yeah cities countries department employees and here is the structure okay now we work with migration okay now let's make a relationship and i'm going to come here open that vs code sorry for that and let's open the models one by one so first i'm going to open the city here because it's the first one and let's add the protected dollar sign fillable which is going to be not false but an array with a state id and a name so let's say state underscore id and the name okay next one let's create the relationship for the st city now has this state id so city with state and i'm going to say function sorry i think we have this public function okay public function state and here we are going to return the last sign of this now the city is going to belong to the so belong to state okay state class very good and now city has many employees because the employee has the city id here so let's say public function and function like this employees and here we need a return dollar sign that is as many employee class okay now i'm going to copy this one because this i'm going to add in the state country department so let's close now the city and let's open the country also in the country we need to say protected dollar sign fieldable which is going to be an array with the country code and name so country code and also the name okay next i'm going to paste that employees because also the seat the country has many employees next let's say the state here and country has many state i'm going to paste that employees and just change this to say states okay and return this as many state class okay save that so now this country has many employees and also has many states very good next one department department is going to be protected for only the name dot assign fillable and as only name and also the department has many employees okay save that close open now the employee employee is going to be with many fields so protect that dollar sign fillable and i need to write it correctly fillable and we need first okay first name last name address okay we have state id and also the city id here country id okay next is the department id and let's say i'm going to do like this so we have the department state country city and now we need the zip code birthdate and date hired so zip underscore code bird date and the date hired okay now let's create the relationship functions so function for the country and let's say the return dollar assign this to the country class okay the same thing for the state city and department so function for state and return dot assign this belong to the state very good create also the function for the city and the return this belongs to the city and the last one for the department return dollar sign this belongs to the department okay friends now we have everything's correctly in the next video we need to work with uh filament resources i hope you enjoy any food like a content like this don't forget to subscribe to my channel like the video and share with your friends all the best and see you in the next one thank you very much hello friends welcome in this video i'm going to create a resource for the country and i'm going to create the form and also the tables so we can create the countries and display them in the table so for the country we need the country code and the name and also here when we have state management so country list of countries with search so we need to add a search for the name by the name and also maybe for the country code it's no problem and here we have create update and delete okay so if you go to the filament php in the resources getting started let's go down and here we have how we can create a resource php artisan make filament dash resource and the name so let's copy this command i don't have open my terminal so let's me open i term i'm going to zoom it and navigate in the sites directory and here i have the filament employees okay now let's create that resource for the country hit enter and successfully created the country resource let's open with vs code the project and here now in my project if i navigate in the admin go and log in here okay now we can see we have the countries right now in the form is empty and also the table is empty now let's go and fix them first let's go in there here and i'm going to work with form so go to the form and what i said we need only the country code and the name so let's go in the text input and here we have the text input i'm going to copy this go to the vs code and i'm going to zoom it open now the filament and inside here we have the country resource and if you don't understand fully understand the filament i have a new tutorial about this how to create a simple blog so you go and watch that because here i just going to show you how we can make a we can make the employees management i'm not going to show you how the filaments work okay so now in this public static function form in the schema here i'm going to add the text input make name we need to import the text input here okay and another one we have for the country code so let's say country and let me check again in here what country code okay country code and if i save go here and new country and we have the fields now i don't like something like this i want to have a layout and i'm going to use a card so if you go here so we are in the forms okay we are in the form and if you go down there the layout here we have a card and we can use a card okay so i'm going to copy this and let's go in our code and add that one here and move the code inside the card make schema we need to import the card of course and this card is for filament forms components card this one now if i save and let's go and check our project we have something like this okay now if i type something so country code for example i'm going to say usa or just us and i'm going to say america create and is created go to the countries now we don't have here you can see is a column just we have the edit let's create another one and i'm going to say uk and i'm going to say united kingdom create okay now how we can display that go here and we need to work with a table now so go to the table and what we need to display i'm going to display all the fields server id country code name and maybe the created ad so if i go to the text column and here we have for the created add dated time so let's copy that come here and inside the table columns paste that in we need to import the text column of course next one we need to make a text column for the name so let's copy this and paste it here not author name but just text column name and say this one i want to have sortable and also we need the search so i'm going to say searchable like this and let's copy and paste it here the same i'm going to say for the country code country code and if i save go back refresh now as you can see here is the credit that the name and the country code and now if i search for the us we have only us of course if i search for america we have only the america here and of course is sortable now what we can add here also maybe we need to add the id and i think we need to add the text column for id okay so let's copy this and paste it here we don't need searchable yes we need sour tables maybe and let's say id save to the browser and refresh and of course we have the id we want to is sortable and here it is our project for the countries we have in 10 minutes grad four countries with a level live wire and we have also the form with titan css very useful forms and we cannot search filter and so on that's it about this video friends i hope you enjoy and if you like don't forget to subscribe my channel and like the video in the next win video we are going to do the same we have done now for countries but we are going to do for the rest so state city department also we have for the employees so see you in the next one all the best friends hello friends welcome so in the previous video we worked with countries and now we have a grad for country we display all the counters in this nice table and we can create and also delete and edit the country now let's go and work with the others so i'm going to create this state resource city department and employee so in the filament php we can create the resource by saying php artisan make colon filament dash resource and the name as you can see here let's open the vs code or here in the terminal i'm going to create all the resources we need so php artisan make filament resource and first i'm going to create the state resource okay next the city resource okay the department and now the employee resource okay very good let's go in the project refresh and here we have we have cities countries departments employees and state very good now we need to work because right now we don't have forms and also tables so let's start with state first let's open the vs code and here we have a country resource i'm going to open the state resource and let's copy what we have in here paste in the state resource now for the state what we need so let's go back in the employees for the state we need the country id and the name so we need text input name okay we need to import the text input and we need to import also import the card from filament forms components card okay and we need the country id now for the country id we need the say belong select sorry select so let's go in the filament and go to the form builder and down there we have this select field and here we have select make author but we need the make relationship so here we have select make author id and relationship so i'm going to copy that come here and instead of the country code let's paste that code in import the select here and say instead of outer id we need to say country id okay and also the relationship is country and we need the name very good save go to the browser and refresh go to state new state state country okay make relationship country let's open now the state model oh okay why we don't have i i think i forget the other relationship in the state and also i don't have other the protected available so let's do that now that assign fillable which is going to be an array with country id and the name and now let's create the function for the country and return here dollar sign this belong to the country country class very good now also let's create the function for the employees and return dollar sign this has many employee class save it and close now let's go back refresh and yeah here we have the country we can change choose the country and let's go to the country and here when we have america let's say united states save okay go to the state create new state select the state and let's say london create and now we have create let's say manchester save and let's go to states and work now with a table and if i come here now for the state we need a list of states with search and we are going to search for the name and with the create update and delete okay so let's go in the code and i'm going to copy what we have here and paste in the state resources table here inside this table let's paste that in we need the id import the text column we need id we need the name created that and now if we need the country here so let's uh go to the table builder display data from relationship and we can say text column make the author name instead of this we say text column make not author name but uh let's remove this searchable and you know what let's make here the name first the name and after i'm going to say country name country dot name the same we have here so this is the relationship method and the name from the relationship method and i want to make sortable and that's it save and go to the browser refresh and here we are we have the id the name the country name and the created ad let's create new state again from the united states and i'm going to say new york create go to the states and if i search for new york okay works search for manchester works and of course if i sort by country work good now let's work with city the same thing so i'm going to close the country now and let's copy what we have here in the state resource and paste it in the city resource here in the form paste that in change the country to be state the relationship is state and we need the name from the state we need to import the card filament forms components card we need to import the select and also the text input very good now let's go and work with table let's copy what we have here paste in the city because it's going to be almost the same so import the text column and we need the id the name now instead of country name we need to say state name save go to the city we don't have any city yet create new city select manchester and i'm going to create a manchester city create very good create new one here we have let's create new one select new york and also new york very good go to the cities we have the id of the city we have the name of the city we have the name of the state which is the relation and the created that if i search for manchester very good let's search for new york okay everything's works let's go and work with the department and for the apartment we need only the name so let's copy this card from here and open the department resource paste that in and import the card let me indent like this import the card import the select oh we don't need the select here we need only the name so let's remove that import the text input for the name and let's go back copy what we have in the table paste it here and we need to remove the state name because we need only the id name and the created ad so import the text column save go to the departments and we don't have any departments yet so let's create new name laravel department create and create another view js create and create another and let's say react react.js go to the departments and here we have the id the name and create a thought and also if i see here now the city is the same list of cities with search department list of departments with search very good and create update and delete so if i say laravel yeah very good and if i go and i did laravel we can edit so to show you here it is we can delete that here we have an elite department yeah okay friends uh that's it about this video in the next video i'm going to work with employees and also we need to work with the have a cut for the user you can see here we have user management create update and delete change the password and search user by username and email so see you in the next video and don't forget if you like a content like this subscribe to my channel and see you in the next one all the best hello friends welcome in this video i'm going to work with employees so in the previous video we worked with the cities departments and states in this video i'm going to work with employees so let's go in the here when we have our nodes and for the employees we have a list of employees with search and filter by name and department and create update and delete so we need to search and also we need a filter by name and department first let's work with for so in the vs code i'm going to open the state resource and i'm going to copy this card we have in our form here and paste it in the employee resource inside the form paste that in we need to import the card so the filament forms components card we need to import the select and also the text input now for the employees we need the department id city state and country id okay so we have the country let's copy the country and if i go here to the forum builder select so i have this comma here i don't know so let's copy this one and paste down there change the country to be state okay another one for the city and one more for the department so let's paste the department here okay next we need the first name and you know what i'm going to add also the to be required all because we don't make any of them nullable so let's say required here and we can do the same thing in other forms and here i'm going to say required and let's copy duplicate change the first name to be last name okay let's copy and add the address here next one what we need let's go in the notes address we need the zip code bird date and date hired so i'm going to paste again this address and change the zip code now for the date let's go in our filament package and let's see in the form builder we have a date time picker and here it is date picker so let's copy that paste it here import the date picker and say make a birth date first so birth date and it's going to be required okay and let's copy and duplicate that and change the date hired okay if i save and let's go and see what we have in our project okay it is the project now let's see if we can create the project let's select united kingdom manchester manchester react.js test user test user address zip code and i'm going to say 2000 here and date higher today okay let's say create and we have created that let's go back we have one record but we don't show because we don't work in the table yet so let's create another one and after create the table okay so i'm going to say ujs js address birth date is going to be some random date and on the free day create go here now we have two records let's go and work with the table now first let's see what we can display here in the employees i'm going to display the first name the last name i'm going to display the because we have here the filter by name in the department i'm going to add also the department name and the date hired so first name last name id department and date hired and also created that okay let's go in the state resource and copy what we have in the table here and go to the employee resource and paste in the table import the text column now we need id we need the first name and it's going to be sortable and searchable okay let's copy that and duplicate and change this to be last name and the last name is going to be searchable now instead of country name i'm going to display the department department name the created ad is going to be that time and also let's copy this and change to the date hired but this is not going to be datetime just date i need yeah we have only date and let's save it and let's see what we have in our project refresh okay now here it is the and as you can see if i select all we have this ability to delete delete all and let's go and see if i can delete them let's change the first name to be test first and let's say save okay and yeah we have test first here and now when i update i want to go to the employee list okay this is one fix we need we need also to add filter so if i go in the employee management we can see we need a filter by name and department so if i go here and let's go in the table builder we need filters when we have filters here and here we have filters okay and we can say filter make is featured also yeah here we have the select filter make for the relationship and let's copy that and let's go in our filter here paste that in we need to import the select filter and make for the department now the relationship is department and we need to display the name now if i save this and go to the browser refresh we have this filter here and right now we have all but if i select only react.js yeah we display on the react view js only the vgs and we have here the reset filters and it's going to reset the filter now here we have also filter by name but we can filter by name we have the source here by name and we have also the sort by name so it's not necessary to add a filter by name here maybe filter the department and the name of the department i don't know so that's it for the employees but as i said we need to fix this the show when we click here united states show only the state belong to the united states okay to this country the same thing for the city so see you in the next one friends and don't forget if you like a content like this like the video subscribe and share with your friends thank you very much and see you in the next one hello friends welcome in this video i'm going to work with a dependent select here so when you select the country i want to display only the states belong to the country and the same thing for the city so when you select a state i won't [Music] display only the cities belong to the state here so let's go and open the vs code and inside the employee resources here we have the select make relationship but we're going to change that and if you go in the filament php ok go to the documentation and search here for the dependent fields here we have an example a youtube tutorial how we can create dependent select inputs okay and i'm going to create for our needs so when we select a country id i want to update the state here and when we select state i want to update the city so let's remove them and now in the select we first need to add a label and let's say country okay after that we need to add options and in our options here i'm going to get all the countries we have so country all and we need the only the name and id so let's say here look the name and the id and we need to relate them so the array like this and we need to make this country id now reactive so we can say here reactive like this okay now let's come here and say select okay select make the state id now state underscore id and first let me add the comma here okay next first we need to add a label for our state so let's say label state okay and now we need the options from the choose but we need the options dependent on this select so we make this reactive and how we can get the country id in here and select the states based on this country so let's create a closure function and we are going to use the callable here and the get method so it's get and let's say dollar sign country is going to be equal to the country find method and we need the id so we can call this get so dollar sign call will get and add the country id okay so we say country refined the get because we use the callable country id what we have here country id okay now let's say return dollar sign country and call the states relationship methods so if i open the country yeah here we have the states and states the country has many states okay so states and we need only the name in the id so let's say name and id okay now if i save as it is right now and let's check always work we need we say here attempt three property states on node because right now we don't have select the country and we say here return country states plus the id so first we need to check if we have a country if or if we don't have a country if if we don't have a country let's uh return state all and let's get only the name and id so let's save it and let's come here and refresh we have all the states and we have all the countries now if i select the united states right now we have only the new york very good if i select the united kingdom we have the manchester okay now you can see here when i select this united state and select new york okay but if i update this we have a selection here okay and we can use in here the after state updated so when we update the country we can say here call back and we need to use the callback set here not get so dollar sign set and what we are going to do we are going to set the state so to assign set the state id to be node okay and let's come here and refresh united state argument statements bf type callback oh callback i said callable like this okay save it and refresh again united state new york united kingdom manchester okay now let's work with uh with city because right now we have only the country in the state so let's go back and i'm going to do the same thing in the state first so we need to make the state reactive and also after we update interstate we need to set the city id to be not okay so let's copy them and paste it in the state and just here we need to say this set not state but set the city id to be no save it and let's copy now what we have make for the state all the select copy and paste it down there and first we need to change this to b city like this change the label the city okay options here now we need to get the state not the country so that assigns state and we need to say state find state id and if we don't have state return city and get the name and id city all otherwise we get the city from the states so state cities and look the name and id okay like this save come here and refresh select the country united states select the state new york and [Music] go to a member function on local nodes so state cities plug the name and id and let me check the state and here we don't have the relationship with cities so let's create that i forget create that's a function cities now return this has many city okay save come back and refresh again select united states new york and now we have only new york city good if i select the united kingdom manchester and now we have only the manchester here okay friends that's it how we can create dependent uh country state and city three level dependent drop down i hope you enjoy friends and if you like content like this don't forget to subscribe to my channel and like the video see you in the next one all the best hello friends welcome so in the previous video we worked with employees and specifically with select dependent drop down here so when we select this country we display only the states belong to this country and the same thing when we select this state we display only the cities belong to this state okay now let's work with the if i open the nodes here we need to work with user management and here we have create update and delete users change the password and search user by username and email okay so let's go and work with that first we need to create the user resource so in my terminal i'm going to say php artisan make filament resource and give it the name which is in this case is a user okay now let's open the vs code and let's see in the filament we have this user resource okay now i'm going to open also the table plus and see what fields we need for the user so let's open the filament employees okay and for the user we need the name the email email verified that is null and the password so name email and the password okay let's go and i'm going to open the department here and i'm going to copy this card and use it in the user resource so import first the card element forms components card okay and also let's import the text input we need the name the email and the password so let's make the name to be required and let's add also the max length to be 255 okay now after this one let's create again text input make not password but make it email and we need to add a label i'm going to say here email address okay next let's add the required because it's going to be required also i'm going to add the max length here to be 255 okay and let's work now with the password so text input make password okay for the password i'm going to say required but i don't want required when we edit the user so maybe we change only the name and the email so here i'm going to say other closure and say page dollar sign live wire it's going to be a boolean okay and not true but true if the live wire so the page is instance of the create record okay elementary source pages okay and now we are okay with uh required let's add also the mean length to be eight or six what you want next one what we can do i'm going to add also the password confirmation so i'm going to say this one is going to be the same as the password confirmation so password confirmation and we need one more thing to add here so we need the harsh the password so we can say dehydrate state using oh we are using this one closure get the state and say here hash make okay import the passat hash make the state very good now let's work with the password confirmation so text input make password confirmation and say now this one is at the label for password confirmation like this and also this one is going to be required but is going to be required if this is of create record okay if we create in the user because it's if not creating the user is not neces it's not going to be required and also let's add here also the mean length b8 the same as the password okay next i'm going to say day rated to be false okay because this uh i don't want the password confirmation as a field to update or to create a user we need only the password and also now the password when we edit i don't want to if this is empty to override the password so i'm going to say also here say date rate dehydrated to be closure get the state and say we let the state dollar sign state here so if we don't have the text input and why we have to here so if we don't pass anything that the password is going to add the password we have and i think we are okay so we are the required mean length the b8 we add the label for the password confirmation and let's we don't add the type so this is going to be type of password very good the same thing here and i think we are okay so if i save and let's go and check now first let's refresh here we have the users and let's create a new user and let's say test user give it the test dot com give it a password password confirmation and say create user created and we are in the edit okay let's open my table plus and refresh of course we have the password arched here very good now if i want to change only the name for example let's say test again or just test updated save and save go to the users we don't show the users yet here so let's refresh yeah we have the test updated go and edit again this one remove the name and let's change the password okay save and we have saved and now let's see here so look at this if it's going to change yeah very good okay friends now let's work with the table here and i'm going to copy what we have in the state so let's copy and sorry let's paste in the columns here we need to import as well text column for the id for the name for the email and the email is going to be searchable okay because we have in the notes search users by name and email and let's add the create a dot okay if i save and let's go in the browser refresh we have the name email and created that and if i search for admin okay let's search for add admin we have only that that user very good and i think we are okay here now what we need other we don't need anything so go here and user management create update delete change the password and search user by naming email okay friends that's it about this video and see you in the next one don't forget if you like a content like this subscribe to my channel and like the video see you in the next one all the best hello friends welcome in this video i'm going to work with group navigation because in the employees management we can see on here on sidebar we need the dashboard the employees management and system management is a group so as country state city department and also the user management is a group and has only the user and i'm going to make that group navigation in this video also i'm going to add rules those forms we have and i'm going to add icons because as you can see right now only the dashboard has this icon home icon and the others has the same icons so let's uh go and start work but before that in the previous video we worked with users and i want to show you when we edit the user so right now if i open this in the private mode and go to the filament employee tests and let's log in with this user sorry let's open now the this one and if i log in with this user let's copy that go to the private mode here and paste that in and let's add one to nine as a password open this inspect elements to show you the password so here type text hit enter and yeah we have one to nine if i log in is error so if i say 1.8 and let's open again this to show you inspect type text again hit enter yeah now we have 1.8 that's login okay now let's go back and change that password and one to nine again here just to see does it work and if i add eight here save we have the password and password confirmation must match if i add the nine save the user is saved now if i open the new private and go to the filament employees go and login add that test user let's inspect element so text here previous was 1.8 now if i add one to nine and say login yeah we are logged in so the change password works okay now let's work with the group if we go to the filament documentation and down there we have navigation and grouping navigation items so we need to add this line of code in our resource so let's copy that and let's open the app filament uh city resource this one is going to be it's going to be a system management so here we need to say system management okay system yeah system management and now let's copy this and save this one go to the country because the same is going to be okay save this go to the department and do the same go to the state and do the same here sorry paste that and first save and let's see now if we have any change in our project refresh and yeah here we have now the system management okay let's create the user so in the user we need to add this one and say user management okay so if i open first the notes yeah we have user management and let's refresh now and yeah here we have the user management and system management here okay now let's work with uh with rules so i'm going to add a rule to all of our forms and let's take one by one here city resource we need this select which is going to be required okay and the name here to add to be required sorry let's add it down there so required and also i'm going to add max length to be 255 for the name okay let's save it and close the city resource go to the country we have this country code which is going to be required okay and max length is going to be three okay go here and say required and also add max length to be 255 okay save it close this one go to the department and here we have only the name so let's say required and also add the max length to be 255 save it close this one go to the employees and i think we have added here the the reactive this one and we need that required okay and this one is going to be required okay next one this city is going to be required as well and what we have others we have this one which is required and all of them is required now first name and last name let's add also the max length of b255 and i'm going to copy from here and paste it in the last name and address and also in the zip code i'm going to say max length b5 okay that's it save for this one and close open the state resource and here we have only the this one so it's going to be required and the name is going to be required as well and also add the max length to be 255 and save it this one in the user resource we added required and all of the validation okay now let's work with with the icons i'm going to add icons so in the city resource as you can see here we have we use the arrow icon and we have a collection let's go now to the arrow icons and see what we can do okay so we need her icon for the city resource and i'm going to add let's see yes i think i'm going to add this one so let's copy this office building and let's go here and change this name to this one save and let's see in the project system management and yeah see this has changed that now let's go to the country close this one go to the country and for the country i'm going to add search for flag yeah i'm going to add the flag and you can add what you want so i'm going to save it what we have other we have the department and for the department one we can do department let's add this one because it's the first one i'm not going to be too crazy here okay let's save it employees for the employee what we if i search for employee we don't have uh yeah without this one for the employees go up here paste that in save close this one state resource for the state i'm going to add the same as the city so let's copy this one and go to the state and paste that in save and for the user search for user and let's add this one just user normal one okay go to the user up here paste that in hit save and close it if i go to the browser and refresh we have employees very good city country departments and state and we have users down there and you can see now we are in the user and we highlighted the user here very good if i go to the state we highlighted the state okay one more thing i want to do i want to order this so countries is going to be the first after the state the cities and the last is going to be the department and if you go to the navigation getting started here to the navigation we can see we have this arrow icon navigation label and also this navigation sort so let's copy this one and let's go first to the cities okay filament city resource and paste that in if i save come here and refresh cities are down there okay maybe the second and the refresh again oh i see this is down there okay contrast is first now i need the department departments to be the last one so let's paste that in and the refresh and yeah now we have countries first states cities and department is the last one okay friends that's it about this video i hope you understand and if you like content like this don't forget to subscribe to my channel and like this video hello friends welcome in this video i'm going to work with the relation managers so when we go to the countries and i'm going to edit this one here i want to display all the employees belong to this country the same for the state cities and department and here in the country we can also create a relation manager for states but i'm not going to do that okay so if you go to the filament documentation here in the resources we have the relation managers and with how we can create the relation manager so if i copy this command and let's go to the iter i'm going to zoom it and paste that command in now we need to change not category but this is going to be the country resource now the relation manager is going to be employees okay and in the employee we have name okay what we have in the employees first name okay so not name but first name and hit enter okay now we need the register the relationship inside the country resource get relation okay so here we have an example in the get relation we need to add that relation manager so let's open the vs code and inside the country resource we have get relations and let's register now the employee relation manager class okay save it and let's open now that inside the country resource relation manager employee relation manager here we have only the form text input make the first name required and it's going to be max length 255 by default we have the text column for first name create action edit and delete action so let's go and see now in the countries from here we have the employees belongs to this country and he left so this country is u.s let's go to the employees and we can see now this viewer view js as the united states country if i change the united kingdom we need to change also the state and city let's save it and we have an error here not error but when i select manchester we cannot select the city manchester and why is that so let's go inside the employees employee resource in the form we have after state update we change digital we make this reactive okay now we need to remove this one we don't need this save come here and refresh again select united kingdom manchester and manchester again okay and let's save okay what we have more than five characters here so let's say seven save come here and refresh again for the last time united kingdom manchester and manchester again save and is saved now if i go to the countries and select the united states we don't have any employees but if i go and select uk we have two employees here we can change only the first name if you want you can go and add the form here in the employees relation manager so you can add also the what we have in the employees the change the last name department react.js and so on so let's just work with that for now change the ujs name to be uk employee okay save and it's saved also if i go in the employees now we have the first name is uk employee so what i said you can add also the other fields here so last name and all the fields if you want but i don't want to do that so if i go now and i want to delete this yeah we deleted and also if i come here we have only one now very good let's do the same thing for the states so in here go up and change the relation is going to be states and add the name here okay now so if i go back to the country uk we have we need to register the in the country resource in the get relation state relation manager class save it come here and refresh and we have employees or states now if i go to the states we have only the manchester we can edit the name and so on now let's do the same thing for states now let's go here go up and for the employees also i'm going to use only the first name just to show you so this is going to be for the state resource employees relation manager and i'm going to add only the first name here and you can add more what what i said and one more for the cities for the cities we need the name and let's say see this here okay now let's go and register inside the state resource so let's close all here go to the state resource and inside the get relation we need to register the employees relation manager from for the states you can see here okay and also the city relation manager class save go to the browser go to the states select this one and now we have employees and also cities which in the cities we have new york for the employees we don't have if i go to the manchester we have this one employees and also we have cities now let's go to the cities and do the same thing here so we need to create first the resource for the city resource now city resource and also one more for the department okay come here go to the city resource inside the get relation register that employee relation manager for city which is this one class okay save it close this one go to the department resource and register that we created the employee relation manager so employee relation manager for the department class save this close go to the browser and refresh and as you can see now we have employees in the city and if i go to the department view.js we have employees here and if we go to the react we have one employee okay friends so this is how we can add relation managers for our country state city and departments okay friends that's it about this video i hope you understand and if you like don't forget to subscribe to my channel like the video and see you in the next one all the hello friends welcome in this video i'm going to create a widget for the employees resource and i want to display here in when we have the employee list i want to display all the the account of employees we have in our database the count of employees we have for the us country and also the account of employees we have for the uk country you can create a custom how many you want but i'm going to create only the three here if you go to the filament documentation and inside the resources we have these widgets here and here we can create a widget by running this command php artisan make filament widgets the name and the flag dash resource for the resource we have we need these widgets and after that we need this command will create two files a class which is going to be inside this directory and blade which is going to be in this one and we need the register or widgets inside the resource by creating this static function get widgets which return an array and here we are going to register the widgets and also display a widget on a resource page so in this case in my list page of count of employees we need the register a protected function get header widgets which return an array and here we register the widgets or custom widgets okay or get footer widgets but i think get to what header widgets is more relevant now if you go here we can see in the dashboard we have more about widgets hide and show based on the if this user is admin and so on register widget in the default when we go here to the dashboard and i'm going to do that but right now let's display in here first and also if you go in the dashboard here we have this stats and i'm going to create this one so php artisan make filament widgets the name and the flag dash stats dash overview and what this co uh this does is uh we just template so filament comes with the stats overview widget template which you can use to display a number of different stats in a single widget so i'm going to create only one widget and display a different number of different stats in a single one okay without writing a custom view so we call this card card make and it's going to create our view for us okay so let's copy this command go to the terminal and paste that in and change this to be stats overview or i'm going to say employee stats overview hit enter give it a resource this is optional but let's say employee resource okay and here we have make sure to register the widget in the employee resource get widgets static method and then again in get header widgets or get footer widgets of any employee resource page okay so first let's register this inside the employee resource get widgets method so let's go in the app filament employee resource and here after this get relation i'm going to create the get widgets so public static function get widgets and return in an array okay so let's return that array and here we need to register the employee stats overview class okay save this one close we need now to register also in the page and we need to create get header widgets which is going to be a protected function so inside the employee resource we have pages here and inside the list employees i'm going to create that protected method protected function get what was the name get header widgets okay returning an array so let's return an array and here let's register that employee starts overview class save it right now if we go in here and refresh nothing happen because we don't added the cards here inside the employee resource widgets we have this employee stats overview and we return the empty array so let's copy what we have here and paste it inside let's remove this one and if i save now go to the browser refresh yeah we have three cards okay now what i want to display here i want to display uh the count of all employees we have in the database so let's say here all employees instead of hard coded i want to import the employee model here and say all and get the count save and refresh and all employees we have 2 right now here you can add also description a description icon you can add a color and so on okay so now here i want to display the cone of the employees we have from uk and another one for the us so first i'm going to get the country so the u.s country is going to come from the country where the country code is us and i'm going to say with count of the employees okay let's copy this duplicate change the us the uk where the country code is uk now and also with count of employees save and here i'm going to say dollar sign uk name employees so uk name country name is united kingdom employees and here we need to display the count so i'm with the say dollar sign uk employees sorry employees count like this and let's do the same for the uk now for the us so let's copy this and paste it down there instead of uk we need to say us also here us save this come here and go to employees and united kingdom employees we need just add like this refresh yeah united kingdom employees one united states employees one now let's go and create one more for the united kingdom manchester manchester select vue.js and say john doe give it the address new york zip code birthdate date hired and say create now thanks go to the employees and as you can see now we have two from for the united kingdom and one for the united states okay friends now let's go and register this inside the dashboard here we can do that we can if i go to the widgets and dark board here we need the register in here but we need to get the configuration file so let's run this php and design vendor publish in or okay and next let's open the config filament and here we can change the path okay domain home url brand auth pages resources and here we have the widgets and as you can see we have two we just account widgets and filament in for widgets let's also add the [Music] employee stats overview class save it and go to the browser replace and now we have all employees united kingdom employees and the united states employees okay friends that's it about this video i hope you understand and hope you like it and if you like don't forget subscribe to my channel and like the video and see you in the next one all the best hello friends welcome in this video i'm going to create the last thing we need here for our employee management which is the create api endpoint to list all employees order by last name okay so on the sidebar we have dashboard employee management system management which is a group and has have country states cta department and the user management as user okay we worked with that we have user management create update and delete change the user search user by username and email ok employee management list of employees search filter by name and department also with the system management country state city and department creating crowd and also search so the last thing is the create api endpoint so let's go in the terminal i'm going to zoom it as always clear this up and let's say php artisan make resource and i'm going to say employee resource employee resource like this hit enter and now the employee resource is created let's go in the vs code inside the app http resources we have the employee resource and let's return here an array with maybe id if we want and let's say dollar sign this id now what we have in the employees we have first name last name and i think we need list of at least all employees maybe we want to display all the details here so i'm going to display all them let's say first first name like this is going to be with first name in order this is now the field in our table and this is what we are going to show in the api okay so let's copy and duplicate this for the last name okay let's say here last name next one address so address here okay sorry and this address next is going to be country id or if we want we can say just country and this country name now i don't know what we want if you want to display the idea we can say country id like this if we want we can display also the counter name but let's say country id and now state id is going to be this state id okay city id it's going to be this city id very good also the department id department id methods department id next we have zip code birthdate and date hired so let's say zip code this zip code birth date this birth date and the date hired okay now if i save this sorry let's save this and let's open our routes api routes this is when we register the api routes here we have an example and let's create our resource our road sorry road gut and i'm going to say slash employees okay and this one is going to if we want we can say a closure here and get the employees so i'm going to say dollar sign employees like this and it's going to be with employee model order by order by name order by last name order by last name okay and let's say get them and here return employee resource collection and add the employees inside here now if i save this okay and we if we navigate in the slash employees so let's open insomnia and i'm going to copy the address here let's copy the address let's go to the insomnia and paste that address here and say api slash employees get request send okay okay and this is because we have imported the up filament but we need the employee resource we created so let's import the app http resources employee resource and save this and let's go and try again send request and now we have all the employees here so the data is with id first name last name and so on okay friends now if we want we can we can change this we can display the department name but i am not sure what the what this is needed so here we have only create api endpoint or list all employees order by last name and what we did here we can order also in the ascending and let's refresh descending sorry and also get the data so here we have order by last name so last name f d last name e and last name is d here okay friends uh i think now we are okay with our project so we worked with that the authentication user management employee management system management and also the api endpoint for all employees now okay friends so here we have the dashboard we display the widgets for all employees united kingdom employees and united states and you can create your own we have employees here display search we display the widgets we can create a new employee and edit the employee as well we have system management for countries we have create search and so on for city state department and the user and that's it the last video i hope you enjoy if you like don't forget to subscribe to my channel and like the video all the best and see you in the next one hello friends welcome now in this video i'm going to work with the relation employee manager so here in the countries states cities and departments when we go to the edit we display the employee relation but right now first we display only the name and i'm going to display also the first name last name and department and also the created ad and the next one is so when you go here we have this button here new employee and if i click right now we have only the first name but also we need all the fields to create the employee so we need the country state city department and first name and so on so we need to add them let's go and inside the employee resource here i'm going to copy the what we have inside this form and paste it in all of our relation manager so first let's open the city here because it's the first one in the employees in the form remove what we have here inside and paste that in we need to import all the select country city and so on all the text input date picker after you have imported that let's go and see now inside the cities okay now if i click edit yeah we have all the fields and if i click new employee we have all the fields so we can create the new employee from here next one i want to display the last name the department and also the created art in the table so also again let's go in the employee resource now inside the table let's copy what we have here so i'm going to do what we have inside here go to the employee relation manager inside the city resource relation manager and when we have the table remove this one and paste what we have here we need to import all the text columns and refresh and yeah now we have also the search so we can search by uh name john okay good let's do the same thing for the others so i'm going to open now the country relation manager employee and inside the table i'm going to paste that and import everything save close oh sorry we need also we need also in the form so let's copy what we have here and i'm going to do something like this now copy what we have here and paste it inside the form save it and go to the country and go to this one we don't have now if i say new one we can create a new uh employee from here now what we see here we have the select country and i want to leave this because we select a country and when we select account we update the state and the same for the city we when we change when we change the state we update we change also the city so let's we are inside the u.s so let's create new from us select new york new york department view js let's say jan though add something here also at the date and create okay create it and we can see we is here and if i go to the employees okay let's do the same thing for the inside the department relation manager employee paste the form here now here we don't need the department so let's remove the department from here because we are inside the department and we don't have a related from for the department so let's go to the department view js we have all the fields here and new we can create new we don't have the department because it's going to be by default the vue.js department now the same thing i want to display all the fields from for the table so let's copy here and paste it in our text column import save and come here refresh and yeah we have all the fields the last one is so city department employee now we have the state to do the same thing so let's open the employee relation manager in the state and inside the table paste that in import the text column and let's also add directly the form so let's copy from here and paste it inside hit save make sure you import all the text input date picker and country state also the city go to the states select this one and now we have employees here we have also the cities but in the employees we have id first name last name department date hired we have the search when we create we have all the fields and when we add it we have all the fields here okay one more thing i want to show you is if you go to the employee resource widgets employee states stats overview here we check here we say get the u.s country with employees and the same for the uk but if we don't have the us and uk country is going to break so what i'm going to do i'm going to remove this one and say here uk employees the same thing down there so us employees and here check if we have the uk country display the count otherwise say 0 the same thing for the us if we have the us country display otherwise say zero save close this one go to the employees and everything works now if i delete the country so let's delete this one okay go to the employees we have us employees zero okay friends that's it about this video i hope you understand and i think we are at the end so we add the witch widget we can create a didn't delete employees and so on so this is going to be the last video about this project i hope you like and don't forget if you like like the video subscribe to my channel and see you in the next project all the best

Channel: Code With Tony

Views: 34,114

Keywords: laravel, vuejs, livewire, laravel 8, laravel 9, laravel crud, laravel 8 tutorial, laravel 9 tutorial, laravel 9 project, laravel 9 authentication, laravel filament, laravel filament tutorial, laravel filament vs nova, laravel filament relationship, laravel filament full tutorial, laravel employee, laravel employee attendance system, laravel employee management, employee management system, laravel filament employee, laravel filament project

Id: gpjFP6RJMXA

Length: 155min 38sec (9338 seconds)

Published: Thu Jul 28 2022