Laravel 11 + React Full Stack App with Inertia - Project Management App

in this video you're going to learn how to build single page applications with Lal 11 and react by building this awesome project management website in my opinion this is the perfect project if you want to learn how to take these two technologies Lal 11 and react and build something awesome this is going to be also a perfect project to put in your portfolio this tutorial also uses iners shop by the end of this course you will have solid understanding of what is inertia and how you can use it in your projects on the lateral side you're going to learn how to set up the project how to write models migrations controllers resource controllers requests factories seeders all that kind of things on the react side you're going to learn how to retrieve the data from Lal or how to submit data including files from react application into LEL how to implement pagination how to implement sorting in the table how to implement filtering and so [Music] on [Music] hello everyone my name is Zur and I'm the coolik on this channel I share my 12 plus years of experience working as a professional software developer I mostly build projects around LL and PHP if this is something that interests to you make sure you hit the Subscribe button now let's have a look at the demo of the project and then we can immediately start building that when we register we need to verify our email address to be able to use the system if you are already authenticated we can log in and we will be redirected to the dashboard the dashboard has overall information of our pending tasks in progress tasks completed tasks and has also my active tasks each cards in the top section display two numbers the number of tasks assigned to me and the total number of tasks my active tasks display the latest modified pending and in progress 10 tasks from the dashboard we have possibility to go to Project detail Page by just clicking on the project name in this table or go to task Details page by just clicking on this task name in this table let's go first into all projects page so this displays all projects all available projects and we have possibility to filter projects by name or sort projects by specific status like pending or in progress we also have possibility to uh sort projects by status by name by ID create date and due date we also have pagination which preserves the scroll position while we are navigating between different pages okay let's filter them by pending and I'm going to also provide some search keyword to filter all the projects we have possibility to delete the project by just clicking right here it will ask the confirmation if we approve this the project will be deleted we can edit the project and change the image change the project name its description the project dat headline and the project status by clicking on the project name it's going to open project Details page where we have more detailed information of the project like the image ID name status and every other information and if you scroll down below we have the tasks Associated to that project and here we also have possibility to filter tasks by task name or status and we have done this filtering in a more generic way that so that you can easily add filtering possibility by other fields we have also possibility to sort by name or ID or status by other fields we also have possibility to sort them by ID name status create date due date or you can add other fields if you want we also have pagination right here which preserves the scroll position we also have Global tasks page at the top which displays all the available tasks and as you see we have much more pages right here and this Global tasks page also displays the project name to which project the task belongs to and we also have possibility to edit specific tasks change its um image or update its project or um update any information regarding to that specific task hit on submit changes U assigned user ID as well and we also have possibility to delete the tasks obviously and we have this user section which gives us possibility to add more users into the system when new user we have to provide the username email password and confirm that password and the new user will be added and we also have this my tasks section which displays all the tasks that is assigned to me so that I can easily have a look what are my tasks and filter them by pending or by impr progress value and just uh whenever I complete the task I can go into edit section and I can change its uh status into completed hit the submit Buton button and the task will be marked as completed and every user has possibility to go to his profile page and update his personal information update details or completely delete his account building such types of projects require a lot of time and energy especially for me who is a father of three kids as well as I'm working full-time so I generally sacrifice my weekend to record such types of projects so your appreciation from your end will be just to hit the Subscribe button because there are 70% of the viewers who are not even subscribed on on the channel and that actually hards my motivation to keep creating such type of content honestly so the single best thing what you can do right now is just to hit the Subscribe button now let's jump into the project before we start working on the project we're going to set up the working environment so here I have all the programs which you might need to set up the working environment and follow with me whenever I don't develop my PHP projects with Docker I generally develop with examp so this is what I'm going to do right now I recommend to download and set up examp for Windows or for Linux or for your operating system um if you already have PHP working environment set up locally then you don't need to download this but examp is an awesome package it contains PHP Maria DB which is the equivalent open source equivalent for MySQL and web server Apache okay we're going to also need a composer which is the package manager for PHP you're going to need this as well well we're going to also need no. JS leral is using asset building tools vit and the v in order as to be able to execute V commands we will need no JS so this particular project I'm going to develop on vs code sometimes I use vs code sometimes I use PHP storm um in general PHP storm is much more intelligent but I understand that it is not free so in this tutorial I'm trying to stick with my uh we my video viewers as close as possible so I'm going to develop this um on vs code and you're going to see everything where I'm where what I'm going to do okay uh I also recommend to download git and have git bash command because I'm not going to use CMD or Powershell for certain things I'm going to use uh gitbash to actually set up the project locally and also in the future and also finally uh I always recommend to have the Lal official documentation opened because whenever you are building a project it's very hard to remember everything so I generally stick with the documentation open it whenever I need it and just um browse it for certain things okay now let's close everything I'm going to leave only uh laral official documentation and now I'm going to open GH I'm going to navigate into desktop and then I'm going to execute composer create d project LEL SL LEL and then I'm going to provide the local folder name inside which I'm going to create my Lal project and I'm going to call this Lal 11- react D inertia and we're going to hit the enter it's going to download the latest Lal version with all its dependencies and it's going to set up the project for us okay it finished installation and now we're going to open it using vs code and now I'm going to open the terminal I'm going to collapse the left side and we're going to install a leral breeze which adds registration and login functionality to our application also Lal Breeze is going to be the package using which we're going to add react to our application let me execute composer require Lal SL Breeze and I'm going to provide right here D D Dev flag as well let's hit the enter once Breeze is installed we're going to execute PHP Artisan re colon install hit the enter it it's going to ask us which stack we would like to install we have a couple of options we have Blade with alpine we have live wire and we also have react with inertia right here and view with inertia we're going to choose react with inertia so here I'm going to type react as soon as I type this now the following commment first of all it's going to ask a couple of more questions like if we would like to have additional features like dark mode for example or inner sha server side rendering in this case I'm going to just choose dark and hit the enter and which testing framework uh do you prefer this is the next question and I'm going to leave this the default one I'm going to hit the enter right here okay so once we do this then it's going to download inertia as well pay attention to the following dependencies inertia is being downloaded and it's going to include the react as well okay Breeze scaffolding installed successfully and now we can already start the Artisan server by executing PHP Artisan serf we hit the enter I'm going to open new terminal inside which we're going to execute mpm run Dev I'm going to bring up two more terminals this one is going to be for Tinker so I'm going to execute PHP Artisan tinker and I'm going to explain what is Tinker in a little bit and I'm going to bring up another terminal which is going to be for my AR Artis commands such as PHP artisan make controller make model whatever so let's give them proper names like I'm going to call this serve I'm going to call this V I'm going to call this tinker and this is going to be Artisan okay once we have the Ser running and V running we can open the website at Local Host Port 8,000 hit the enter and we're going to see the following level application up and running now I'm going to activate dark mode for this let's open the left side left panel we're going to open tnd config JS I'm going to collapse the terminal and here we're going to add dark mode to be based on class this is the one change we're going to do next we're going to we're going to go under resources views up blade PHP this is what we're going to open and here I'm going to add class dark as soon as I save this and reload the browser even you don't need to reload the reload will happen automatically you're going to see lval application running in dark mode now let's see the power of inertia and for this let's just pay attention to this reload I icon I'm going to navigate to different pages like login and register and also pay attention to the bottom left corner whenever I Mouse over on this login and register you see down below right here the URL is very valid and correct URL it looks like it is a traditional page login and register but now pay attention to the reload icon and as soon as I click login this reload icon does not move and we see a progress bar right here in the following area let's go back and click on register and pay attention at progress bar right here click on register okay it wasn't uh it didn't trigger the progress bar because once it was already loaded let's click on the already registered maybe and maybe for the password so the navigation from page to another page happens through inera that's a single page application and the pages rendered right here are actually react Pages now let's try to register whenever we register we are automatically um approved let's hit the enter I was able to register and I'm also logged in okay which is something I want to avoid and I want to implement the email verification for this we're going to open user.php model which is inside app models folder and we're going to implement uh that's going to implement must verify email uh contract okay once we implement this uh user class from must verify email then whenever we register we will be able to well the system will send an email verification which me to confirm okay let me actually try to reapply migration so that my newly registered user is gone or maybe I can go into profile and I can just delete my account okay I was able to delete let's go into register I'm going to provide um the same details let's hit the enter and here it is okay so now it sent us email verification which me to verify and confirm but where was that email sent so let's open file which is inside the Project's root directory right here okay and if we scroll down below we're going to see this um mail where is okay mailer mail mailer which is log by default and this means that every new email is not sent anywhere but it is saved inside log files which we can find under storage logs L log once we open this and scroll down below there are some more logs but at the very bottom we are going to see the following email this is already an email let's scroll up a little bit to find the beginning of the email this is the email body let's scroll up here we go this is it okay pay attention uh from LEL the email comes from LEL verify email address if you scroll down below please click the button below to verify your email address here's the link I'm going to click on control on my keyboard and then Mouse click on the link which does open something uh yes it opened and now I'm verified and I'm also authenticated okay which is cool I think I clicked that twice so this is the previous link which I can reload and I'm already verified and I can log in if I click this I can it opens in the background but I'm al already authenticated it doesn't do anything okay we can close this now let's understand what is inertia and how that works inertia basically is a glue it is not a framework it is a glue that connects the frontend to the back end okay so in our case we connect a react application to LEL inertia actually can be used even with different bacon Frameworks uh out of the box Lal Breeze supports inertia with VJs and inertia with react we have chosen to build this appc application with react and now we're going to have react frontend application now let's understand how inertia Works how it does the job if we open up blade PHP which is the main layout file we're going to pay attention to a couple of attributes and directives so here we have inertia attribute added on the title okay so in the conf in the title actually we have hardcoded app name but whenever we navigate from one page into another pay attention we have welcome Lal right here if we go into login we see login Lal if we go into forgot password we say forgot password and so on so basically the title is changed dynamically based on this inertia attribute if we remove this completely save the page we're going to see Lal right here it doesn't matter on which page we are it's going to be still Lal now inertia is not able to update the title of the page that's why we need iner attribute right here now if we scroll down below we're going to see a couple of directives like Roots we see this uh V react refresh and so on and let's explain all of them step by step this Roots directive is responsible to generate all the registered roots and make those roots available in react components because we're going to need those roots to create the proper links from react application from one page into another but we Define those roots not in the react uh like if you are familiar with react you define the roots generally in react rotor right but in our case we don't Define those roots in react rotor we Define them inside web PHP like we Define rotes in traditional lateral website like here for example we Define the slash root we Define the dashboard root we Define the profile root and inside out we even have more rots such as register login for good password and so on okay and we need to use these roots in the react applications that's why we make those roots available in the react application through these roots directive and that happens using Ziggy package so we have also Ziggy package installed if you open Package Json and we're going to search for Ziggy maybe that is not installed by default but that is a dependency of our inertia JS react anyway let's open the browser I'm going to inspect this and let's have a look in Under head let's inspect the head and we're going to see the first script tag and here we see this Ziggy concept variable and here we have all the defined Roots like this is the URL and if we just have a just have a look it's not necessary to understand everything but just have a look here we see dashboard for example we see what is the URL what methods can be used to access the dashboard and here in this case the dashboard is a root name here we see the uh profile for example profile destroy which is the URL and what methods can be used to destroy the profile and so on okay using this approach we have all the defined RADS available in react the let's close the package Json the next directive is the V react refresh which is the following script and that is responsible whenever we change something in the react application the browser will be reloaded that's like a hot reloading feature the next one is the V which is I think very familiar it's going to load uh the app jsx and all the pages related jsx components whenever we reload this page right now if we observe that uh what is generated by this V directive we're going to see this is the one let's enlarge this so this is the one uh which is generated by this V directive this is it and here we see Pages welcome J js6 okay so using this page variable but if I go into login and then I reload the page then I see right here Pages out login jsx and here we also have CSS which is the entire tyon CSS in our case also when we navigate uh between Pages I'm going to open the network and I'm going to search for the pages because this is the interesting part when we reload in this case we're going to see login jsx is loaded so jsx is basically react page but then when we start navigating from one page into another so we see welcome jsx right here okay now dynamically welcome jsx was loaded we click on register now register jsx was loaded now I click this um already registered and loging jsx was loaded and you get the idea right uh and basically we loaded all the pages and now when we go back nothing more is loaded because login was already loaded and it is not going to load anymore and using this we get a very high performance single page application okay that's cool now where are these Pages located all these pages are located under resources JS pages and these are the pages we are going to also create and modify inside this folder inside inside the pages okay let's finalize this part inertia head basically directive is responsible to generate all the meta text we can Define all the meta Tex inside our components inside our Pages like in welcome jsx we can Define additional meta Tex which will be generated and added inside the head if we want so and this inertia directive is the main directive which is responsible to render the entire react application so if we expand this body we're going to see with ID app right here this is the react application entire react okay so we understand what are those directives now let's open web PHP again and I want you to pay attention to one thing whenever we access this slash we're going to render the welcome page using inertia render okay so traditionally when we build the tradition application we use the view helper function right or we can use the view facade Even in our case we are using inera render and there is a separate inertia helper function as well we can render the welcome like this as well okay and this inertia render is responsible and that makes sure that we don't it doesn't reload all the assets and CSS in JavaScript like the traditional page render rendering does so now this inertia render is necessary to render the jsx component and also this inertia render is looking for under resources JS Pages traditionally if we use the view helper function it's going to look up under resources views right but this initial render looks up under resources Js Js Pages now now let me call up the left side and I'm going to open login jsx and I want to search for link so this is the link basically using which uh user can be redirected to the password reset page so this is the link actually and when we click on the link we know that now this doesn't do a full reload it only does a single page application type of reload and only one page that page will be reloaded nothing else right so if we replace this this is a link special tag which is imported from inertia if we scroll up we're going to see link imported from inera JS react right so if we replace this with a tag it's going to still render the same link if we go back so the link is the same like from the user interface perspective but whenever we click on this link pay attention to this reload icon it's going to do the full reload and it's not going to only reload the page but it's going to do reload all the assets as well let's go back into login page I'm going to reload I'm going to clear up all the network side and I'm going to click on this and it's going to do the full reload including all the other things so the CSS and JavaScript and everything else right if I undo the change and leave this as a link and then go back into homepage reload the page and clear up the network and then I click this forgot password we're going to see only couple of requests like the favicon and the forgot password is a root and we see this jsx component which is actually requested from under this route so this is the response coming from inertia we see all the this is the entire response and based on that response the following component was loaded let's open vs code and I'm going to also cover the file which is located under resources JS appjs 6 so this is the main Javascript file and this is responsible for creating the inera application and managing the titles and loading components and so on so if we observe this right here we see what's the application name we take this from the uh V up name or it's going to be LEL and then this is how the title is generated the title what we see in the browser right here so this is the actually title which is given right here and the title is set from the component like if we open login js6 if we scroll up right here we it it is basically using the guest layout and with a special tag head tag and that head tag accepts the title right here so this is the title if I simply change this and let's write some junk characters uh random characters and we are going to go back into login page and we're going to see those characters right here okay and this title is taken let me undo this title is taken and then we append the application name and this is how the title of the page is generated in the result this is the logic how the components are resolved they are searched under Pages the component page name and we have also this glob pattern uh that is going to look for the following files it's going to look for under pages in The nested directories in JS the setup is the function inside which we're going to create the uh root element and we're going to render this as a react application which is the app um given as an argument to this setup and progress is a um progress has a color and we can change this color and that's going to be the progress color what we see when we navigate between Pages the progress color right right here if I click on this let's reload the page click on this you see the progress right here so we can adjust that progress color if we want um from here as well now let's work on the database structure I'm going to bring up the terminal let's activate this Artisan terminal and let's generate several models and migrations PHP artisan make model project model is going to be the first one which um I'm going to generate and I'm going to also provide uh two flags one is for the factory I'm going to generate the factory as well and I'm going to generate the migration as well so- F and M let's hit the enter so three files were generated look at this so first of all this app models project PHP was generated it also generated uh database factories project Factory and it generated this my ation file and whenever we again hit control on our keyboard and mouse click it's going to open the file in the vs code which is exactly what we want but let me generate the second model as well um PHP artisan make model but in this case we're going to provide task right here we are going to give the same Flags we need to generate Factory as well as the migration for the tasks as well okay so let's hit the enter again it generated three files and let's click on this migration file control and mouse and it's going to open that as well so now we can close the terminal and we're going to work on this um migration files so let's start with the projects What fields do we need let me quickly generate those fields so we need name for the project we need a long text as a description we need need um we need time stamp to be a due date time stamp uh due date which actually can be nullable okay we also need uh to provide status uh the status must be required but I think we can make the description to be nullable okay good we provided the status uh we need um let's provide the image path as well uh and image can also be nullable we are going to also provide um foring id foring id the column name will be created by who created the project and that's going to be constrainted on on on users um on delete let's restrict on delete by default okay and let's duplicate this line and we're going to have updated BU as well so we have name we have description due date status image path created by updated by uh three fields are knowable I think this is good now let's open tasks table and generate um columns for it we will need again name String name we need um description and again description needs to be long text we need um uh image path as well let's make this string uh image path image path can be nullable the description can also be nullable we need status and the status needs to be required we need um type or not type but the priority the task needs to have priority and task the status and the priority needs to be required uh we can provide extra information such as um tags or Etc but I think we can skip that actually we don't need uh to over complicate things uh and just let's make the main focus on the actual fulls application functionality lateral react single page application okay not too much details now let's provide um like the due date maybe due date and the due date can be again nullable and let's provide this uh created by an updated by I'm going to copy these two columns from here and we need also assigned user ID assigned user ID call and I think that's it and of course we need the um project ID which is constrained on projects so task has a project ID so we have name we have description image path status priority due date uh we have assigned user ID we have created by updated by in Project ID okay all of them are required except due date image path and description okay this is cool so we have migrations ready now let's open factories in the database folder factories let's open um let's close the migration files first and then open project Factory and task Factory and in the project Factory we are going to define the fields um fake fields for the project so basically I'm going to execute the seed command to create um 100 roughly 100 okay or 100 or maybe less um projects or end tasks so that we have something to work on uh the beginning and later we're going to also Implement creating the projects okay let's start with the um project Factory and we need the um name okay so we're going to use fake function for this and let's provide sentence so the name needs to be a regular sentence one sentence okay the description needs to be real text let's provide some real text we have due date as well which we need some fake date but uh we need let's take some range because this is a due date It generally needs to be in the future so let's provide daytime between between now uh and plus um one year maybe like this let's provide um status uh actually the status needs to be one of the uh available values let's take a random let's take one random element from the given list and I'm going to provide right here um three uh options for status pending the project is either pending in progress or completed okay cool uh let's provide image path to be uh fake um image URL image URL no arguments are necessary for image URL and we need created at let's provide just one as a hardcoded one the user who created this project and updated it I'm going to provide this one as well now let's open task vectory and do something similar there now let me copy everything put this right here we need name to be sentenc the description is to be real text the uh due date is okay the status is fine uh we need priority next to the status uh fake um random element from the given list uh so let's provide an array here we need a low medium and high so these are the priorities we we are providing um we can Pro leave the um image path we need also assigned user ID let's put this right here assigned a user ID and I think that's it so name description due date status priority image path let's move this down like this cool okay perfect now let's open database Cedar which is under database folder Cedars and here it already um there's already code to create single user but I want to update this so I want to create my user let's call this provide my email I'm going to provide my password here which will be um which we need to pass into bcrypt because we want to save the encrypted passwords in the database one two three uh Dot 3 2 one and a okay this is the test password we need to have it at least eight characters uh containing with uh uppercase letter and digits and so on okay whatever um and let's also provide email verified at and we're going to provide time which is the current time so whenever we execute the CED it's going to create this single user okay and now let's execute let's create also use the factory project Factory as well as the task Factory to create uh fake projects and the tasks so for this we're going to use project Factory we're going to provide like let's create um let's provide the second function count like 30 um 30 projects and then each of them needs to have tasks has tasks like um 30 and then we're going to execute create uh this project model needs to be imported from up models make sure that the following import is added by vs code at the top uh okay so I think um that's okay that's good however we need to open this project model and we're going to define the relationship between the project for uh into tasks okay public function tasks return this has many task awesome now when need to execute migration with the D- seed option to create the tables what we just um generated and also create this seed data let's bring up the terminal and execute PHP Artisan uh migrate D- seed before I execute this let's open this project Explorer and in the database we already have this database.sql okay if that file doesn't exist right here uh then whenever you execute the following command it's going to ask you to create or it's going to automatically create but for this project we are going to use the sqi database which is the simplest one to um set up and um just make it working uh for beginners okay if you know what you are doing you can easily switch to mySQL and you're going to find the database connection details right here in the file lot of 11 changed this actually and the default one is sqlite in the LEL 10 the default one was um MySQL or Marb you could obviously change into sqlite but in Lal 11 the default one is SQL light which I'm going to leave I think it's it's uh it's good for absolute beginners you don't need to worry about the data database okay so that's that's good I'm going to leave this into sqlite and now let's actually execute this PHP arst and migr Dish Dish seed okay we have some sort of error let's expand this on full screen let's have a look the create projects table was executed create tasks table was executed however uh here we have this error unique constraint violation exception look at this Integrity constraint violation unique constraint okay so we are about to create new user in the database which has this email Zite example.com but that user already existed in the database okay that is the issue so I'm going to actually drop every table and then reapply the same migrations so I'm going to execute PHP Artisan migrate column refresh which will again drop all the tables reapply them and then reapply the seats so while we are developing this I'm going to prob execute this PHP design migrate refresh couple of times and while you are doing your projects from scratch feel free to execute this migrate refresh which will drop everything and reapply okay instead of creating uh new migrations uh at the beginning stage of your project you can drop everything modify the migration imagine that we made some mistake in the migration for example we missed one column which we want to add right here here okay there are two options we can update this migration file we can drop everything and reexecute or we can create new migration file and which the migration file will be just alter table add new column right there so again I want to make this very clear if the project is um you're developing from absolute scratch okay and you at the very early stage and you even have not pushed um your changes commited and pushed your changes through Git You can modify an existing migration just roll back everything and execute migrate uh refresh with Das Das seed or without it doesn't matter in this case but if you have already pushed your project if the project is um cloned by uh uh by your teammates and they already execute the migrations then changing this migration is bad idea I'm telling this to beginner developers because you might think that okay I can always change the migration reapply but your developers your teammates have already executed this migration and the migration is marked as executed in the database and they will have trouble uh if you just make the changes in existing migration you have to create new migration if your project is pushed if your project is clowned by another developers and of course if the project is also set up uh on production environment if you have any questions regarding this uh please let me know in the comment section I will be happy to answer your questions okay now let's let's execute this uh PHP migrate refresh just SE it's going to create it's going to first of all drop roll back all the migrations existing ones then reapply all the migrations and then it's going to see the database here we have again error not null constraint fail project created by okay created by was specified as null in one of the factories uh here it should be created by created by here as well here as well created by um and updated by cool however we can provide created it and updated it as well created it will be current time and updated it will be current time and we can copy this from the project Factory and put this in the um task Factory as well now I can clear this and I can execute the same thing Mig great refresh um which will again drop everything run migrations and then it's going to start seting the database which it looks like it is working right now but because we are creating um like um several records actually in the database it's going to take a few seconds so we are actually creating 30 projects and each project has 30 tasks so totally we are creating uh almost 1,000 objects in the database okay the seing was completed the migration files were applied and now I want to use this Tinker so Tinker is a common line interface to work to interact with the uh Lal okay we need to execute PHP Artisan tinker and the Tinker comes by default with the L installation and here I'm going to actually check how many objects uh are in the database inside the pro projects table or inside the tasks table so we can execute app models project colum colum count okay this is regular LEL code which you can put in the code as well but whenever we hit the enter it's going to uh execute right here and gives us the output and let's see how many tasks are in the project in the um database task count we see 900 so this is exactly what we expected we can also execute uh task uh cury um P pinate like five uh and hit the um and then we can call get I think or we can call all don't remember by heart every single thing but this gives us also possibility to cury all the objects now look at this so we executed paginate and all and it gave us five tasks so this is the first task we have the ID name description every field which is in the database this is the second one this is the third one with ID3 as well fourth one and fifth one okay it g gave gave um that information to us okay so this thinker is sometimes which we might need to check and um yeah in this case I can just close this and we have the database already prepared we have the tables we have the um Factory ready and we have the SE data ready as well and let's just test if we can log in with this email and password I can save this let's open the project I can reload this I will be locked out and I can click login with this password yep I was able to log in I can update my password now let's create controllers I'm going to bring up the terminal and let's execute PHP artison make controller first let's create project controller and I'm going to specify D- requests and D- resource right here but I'm going to also specify the model D- model equals project so I'm creating new controller and telling the Lal that this controller is for the project model it it is the resource controller and it also needs requests okay what does this exactly mean let's hit the enter and I will explain okay have a look so three files were created store project request update project request and project controller now let's hit the control on the keyboard and mouse and let's open the project controller and let's explore by specifying D Das resource flag indicates that we want to generate all these actions okay index create store show edit update and Destroy by providing dh- requests indicates that we want separate request class for storing the project as well as for the updating the project which it actually did so it created these two projects and whenever we implement the actually saving the project or updating the project we have to implement the correct code right here in this store project request uh we have to do the proper logic in the authorized or just return true and we have to properly Define all these rules okay um we have this project controller and I'm going to also generate task controller PHP artison task controller D- model equals task um D- requests and D- resources resources let's hit the enter PHP Artisan sorry PHP artisan make controller task controller let's hit the enter D resource I think yeah not resources so it created the store task request update task request and task controller exactly what we want and I'm going to do the same thing for the user let's create now user controller and the model will be user let's H the enter again three files we are created okay awesome now let's close this and have a look those files so we create project controller task controller again this is this has the same structure it is um for task though and we have the user controller now let's open web PHP which is the roots web PHP under roots and we're going to redefine The Roots I'm going to just uh modify these parts so whenever we are accessing this slash I don't want to render this welcome instead I'm going to redirect into dashboard so wrote redirect from slash into dashboard now let's take care of of the dashboard so the dashboard accessing the dashboard is only allowed when the user is authenticated and verified and also accessing the projects uh needs the same logic like the user needs to be authenticated and verified so I'm going to create a kind of a middle wear group okay so Road not the middle wear group but a group for roads based on the middle we so rout middle wear we are going to provide right here um those two middle we out and verified and then I'm going to execute group on this which accepts a closure inside there and then inside that closure any road what I Define uh will only be accessed if the user is authenticated and if the user is verified so let me actually get this maybe get this part I'm going to cut these so on the dashboard we're going to render the dashboard and let's give this also proper name right here that's perfectly fine I'm going to delete this and let me actually write this with arrow function yeah uh inertia render like this so that we we have this on a single line okay perfect so now this is going to work in the same way we can have a look if we just try to access the um homepage basically if we just try to access the slash it tries to redirect to the dashboard but we can't access the dashboard because it requires authentication so we will directed to the loging page once we log then we can access the dashboard if we can just access to slash we will be redirected into dashboard now like we Define this dashboard we can Define already uh the resources for the uh project and tasks and users so for this I'm going to use resource method I'm going to provide right here the resource name which is going to be project and the controller will be project controller okay make sure that the project controller is imported right here and I'm going to duplicate this line two times here I'm going to write task here I'm going to write user and let's provide the correct controllers task task controller here and user controller here make sure that the task controller and the user controller is also imported at the top of the files okay now we Define this uh project task and user now let's have a look what roots are available PHP Artisan rout list if we hit the enter we're going to see all the roots that is available okay and I'm interested in the one which we Define right now so we Define this project uh root which is uh to get uh and the root name is called project index and this going to be the following function project controller index we have the post on the project to create create new one we have the um get to render get or head to render the project detail space so basically here we see all the roots which is for the uh resource controllers in general we have the same thing for tasks and we have the same thing for users okay now I think it's time to start rendering projects but before that uh let's open the layout and let's add uh projects and users and tasks in this layout section so the layout is basically called authenticated layout which is under resources JS layout so let's open this scroll down below and we see the dashboard basically this file is large and I want to change the indentation into two spaces because whenever I whenever my file grows basically it goes on the right and this is not convenient so I'm going to open this editor config file and I'm going to redefine uh for the um jsx file for the jsx file I'm going to set the indent size to be two okay now if I go in the authenticated layout and if I save this or if I just format the code format document I think I didn't Define this properly um let's probably JS as well yeah um I think we need to Define like this or like this uh we need Pro probably we need this for the JS as well so let's say this and now let's yeah you see that right so now the code was formatted into two spaces which makes this uh more readable because we don't have this code on the right side and now let's find this dashboard section and I'm going to duplicate this three times okay and then this one will be projects and the root is going to be project. Index this is what we saw already and right here we also need project. index then down below we're going to change this into task. index and here we need tasks or maybe let's call this old tasks and right here we need user do index and we're going to have users navigation uh item now if we open this we're going to see projects all tasks and users right here however when we click right now it doesn't change that much it doesn't do anything because we don't have the proper View files created so that nothing is returned from the controller and that's why it doesn't do this redirect to render projects first we're going to create the new file and that file should be under resources JS pages and actually I'm going to create new folder right here call this project and inside there I'm going to create index JS x file for um the project index action basically okay and later we're going to create more files like create jsx or edit jsx right here but first we're going to uh focus on listing the projects uh so we're going to export def default function from here Index this is going to be react component function functional component so we are going to return from here the jsx template um we're going to use this authenticated layout so if we open for example dashboard jsx here we are using this authenticated layout which has two props passed so it has the user prop passed and the header prop and the header prop is what is rendered as a title of the page so if we go in the dashboard this is the header prop okay and then we have this skeleton and right here we have this text you are logged in so we need to use this authenticated layout like we are using um in the dashboard okay so if I go right here and start typing authenticated that needs to be imported from this authenticated layout I'm going to click on this and U authenticated was imported so pay attention that right here we have this authenticated layout it is called authenticated you can call whatever you want whenever you are importing but the autoc completion uh gives you the same name whatever is named inside this authenticated layout uh and the function is called authenticated okay we can change this authenticated layout and now whenever we start typing if we remove this whenever we start typing authentic at a layout and import that it's going to do this proper import okay that's good now we need to pass these two props let's go in the dashboard I'm going to copy these two props in the authenticated layout and I'm going to pass this however pay attention that the um user this out needs to be imported uh accepted not imported accepted as a prop because inertia passes all the data uh as a prop so if we open um we have this dashboard okay right now we're going to accept the out but I'm going to um show you one thing as well for example let's open profile controller and the profile controller uh renders this profile edit uh view which the and uh the profile controller passes two variable Ables must verify email and Status so if we open right now profile sledit right here we have this must verify email and Status okay so these are two variables uh which are passed as a prop from the controller okay whatever we're going to pass to inera view from the controller uh then we can accept this as a prop inside the Rea component but you probably have a question what is this out and how this is available right now because we don't actually pass this from the profile controller okay so this out is available through the inertias middle wear if we go into up HTTP middle wears we have this handle inertia requests okay and if we scroll down below we're going to see this share and we have this out user which is the currently authenticated user so that shares that um out user to every view basically we can accept out user into every view which is shared um for every view okay now let's close this edit now let's close the profile controller and focus on our index js6 so we are going to accept right here projects this is something uh we need to pass from the project controller except right here iterate and render okay so the title will be projects and we are going to have the um the whole markup right here let's go into dashboard and let me just grab this part and put this right here and instead of you are logged in we can just type projects and we're going to actually render table um in this place but now let's close this authenticated controller let's close this dashboard or maybe we need dashboard for one more thing we have this head title so this head title is exactly the um title we have been talking about uh previously this title will be updated will be displayed under under here exactly right here okay and also if we just open this upjs x this title is going to be that title so the page title will become dashboard slash the application name okay awesome so we need this as well let's put this right here and let's give it projects the title will be projects now we need to close the dashboard and let's open project controller and let's return the inertia view return we can call inertia facade render method or we can use inertia's helper function I'm going to use the helper function I think it's more convenient uh and we're going to render project slash index okay and we are going to pass some variables to this index if we don't pass anything right now it's just going to render let's go into projects and click on projects it doesn't do anything let's open developer tools and see what errors do we have Pages project index jsx um page not found Pages project index js6 okay where is this index jsx okay Pages project ahuh that should be uppercase yeah generally the uh react components are called in uppercase so that should be uppercase index jsx so whenever I save this and click on the projects it does something but we have an error no problem let's have a look head is not defined so the head this is the component which needs to be imported from the inera we haven't imported that okay uh vs code can automatically import that for you whenever you start typing like head and um this is the file reactjs um sorry inera JS react if we click on this the import will be done automatically okay obviously we need head right here okay now the head was imported if we just reload we don't see anys in the console uh and if we click on the projects we were redirected to the projects the title was changed the content was changed okay now we need to uh pass the projects from the project controller so we have to select these projects let's Define a variable called CER which is going to be project query then on CY I need to call pinate okay and I'm going to uh return just 10 records but I'm going to also provide um how many links I need on each page of the current page so this is something uh which I don't want to be very large so I'm going to set this into one okay and then this is the projects and I can already pass this right here but I also want to create a resource this is also good practice and you should consider whatever you're going to pass into the project Index right here the entire data will be available on the front end in the browser so make sure you don't pass sensitive information un likee typical blade if you pass any information to Blade but if you don't use that information in the blade then it's not going to be available in the browser but in inertia it works differently once you pass the data to the view that data is sent to the browser you might not be using that information in the react component but for the user the data will be available so it's not recommended to pass the entire list of database objects but we should create resources similar how we are doing when we are developing API so now I'm going to create project resource let's bring up the terminal and execute PHP Artisan project resource uh re Source HB project resource okay good let's hit the enter uh sorry uh sorry PHP artisan make resource project resource right let's hit the enter project resource was created now let's also create task resource task resource let's hit the enter okay task resource was also created now let's open project resource and we are going to adjust this part what needs to be returned to the browser come on sometimes this autoc completion is very awesome sometimes it's um annoying that autoc completion is from the PHP tools extension to save some time I'm going to just copy and paste the uh properties what um I need to return okay and I'm going to explain obviously so we need to return the ID we need to return the name when to return the description so I want to uh return the created dat but formatted in the following format it needs to be year month and the day so basically I'm converting this created it into carbon instance and then calling format on this so I'm doing same thing um for the D dat um we're just returning status image path created by and updated by so this created by and updated by uh is um needs to be a relation to users table because the project has created by created underscore by and updated underscore by fields which has relation to the U users table and we need to Define this relation okay but also make sure that the carbon class is imported so if you just delete few characters and then hit control and space it's going to give you um all the available carbon related classes and we need to import um carbon okay not illuminance uh illuminate facade but uh just carbon from the uh carbon name space okay so now this is good let's open project PHP and Define this um relation to created by and updated by so I have the following live template and created by which saves some time for me user so we have this relation into user with the column by the column created by now I'm going to duplicate this this is going to be updated by to user by updated by column now in the project resource this is going to return the um user object okay uh which is cool however when returning the entire user object this is also something we need to be careful uh in the with the same approach where I just explained so if we're going to return the entire user object to the um front end then um this can be visible in the browser and we might not want that I'm going to explain what I'm talking about right now and then I will modify this part slightly so I think I don't want this project PHP I'm going to close this and in the project controller so we have this projects which is a res of um pagination and then I'm going to pass these projects and I'm going to use project resource right now and call collection on this and um give the projects um variable right here so this now re passes this paginator result into this project index react component which can be accepted as projects right here okay now we can take projects and print right here inside pretext I'm going to use also Json stringify oops projects and let's pass undefined to here as well now let's have a look on the front end let's reload the page uh collection on each page does not exist okay let's see uh I think this on each page needs to be called sorry what is this uh excuse me it should be on each side on each side on each side of the current page sorry so here we go so here we have all the data so this data is all the projects we have so we have the ID name description whatever okay which is part of the project here we have this created by which is the user object and we have the ID name email email verified that created an update dat okay and we have everything but this is exactly what I wanted to mention so this email verified Ed is something we probably don't want to expose and uh return to the browser so right now all the created by is my user but if the current user is somebody else why should I be able to see uh what is email verified at of that specific user right this is not going to be uh logical so for this we're going to create new resource so now let's create user resource and uh let me first check if the user resource exists out of the box no it doesn't exist so let's bring up the terminal and execute PHP artisan make resource user resource let's hit the enter that was created and now if we open project resource I'm going to pass this created by into user resource new user resource so let's just pass this created by and we're going to do the same thing for updated by user resource okay so we're good right here and now let's adjust this user resource let's open that and from this user resource we are going to only return ID we are going to return name we are going to return email and we are going to return uh created it when the user was created this um created at uh let's create carbon instance and then we can call format on this uh I think the carbon is not included so that should be imported semicolon is missing right here and the format needs to be obviously the format a month day okay we save this and now let's have a look in the browser this email verif dat as well as updated dat should be excluded because we are only returning four fields from here maybe even this created dat is not necessary we can exclude this no problem so let's just reload and have a look look at this so we see only these three Fields ID name and email who created that specific project now I'm going to scroll down below and we're going to see additional information so here we have the data but we have something else as well scroll down below we see links first last preview and next and we see the meta information what's the current page uh from um from which here we have two which so we are displaying from 1 to 10 last page is three and these are all the links uh for the pagination and we need to use that links to actually render the pagination now let's start working on the table part and I'm going to uh right here in this area I'm going to create the table but my main focus in this video is not the design HTML in CSS is very secondary so I want to focus on more on functionality so I will try to speed up a little bit in the section and maybe even copy and paste the CSS classes and HTML templates but I'm going to obviously exp explain uh whatever I copy uh for what I copy or Etc okay so let's first create the uh table T head inside there we need TR and we need th obviously multiple th's I'm going to Define them as well then let's Define tbody TR uh TD and I'm going to Define them as well okay so I'm going to copy now some classes for the table so these are the table classes again it's a fully Talan CSS classes so fill with a small text text left on uh this is for the right to left version and we have this dark uh version as well so then I'm going to copy classes for uh T head and put them right here uh for TR I'm going to also provide uh text no rra and for th we're going to provide um pting X3 and pting Y2 okay and I'm going to duplicate uh let's uh right here ID for example the First Column is for the ID and then I'm going to duplicate is for image name status created date um due date created by and finally actions so let's define them there going to be image this is going to be um name this is going to be status create date um due date then we have created by and we have actions okay and now let's focus on tbody I'm going to copy classes for um tbody as well actually uh tbody doesn't need classes but class for TR is necessary so these are the Talis classes for TR and and we're going to iterate now our project's data okay and for each data we're going to render this TR so let's use now project data map data.map we have here project and we're going to return js6 so I'm going to return the following um TR from here and let's define now classes for um for this TD as well well so it needs to have uh pading x 3 pading Y 2 let's output project ID okay awesome um let's duplicate this actually this is the project ID right so I'm going to make this a little bit darker so I'm going to use th then we're going to have the Project image let's change this into TD and then we're going to have the project name as well and I'm going to make this darker as well maybe uh and let's use or maybe we can use TD okay again I'm spending some time on a TD I'm going to hit myself into hand whenever I start doing this so this needs to be um an image so let's just put an image tag right here and in the source we're going to Output project. image path then we have the name name project name now let's duplicate this and we need project um I think the next one is status uh then we have created dat then we have due date um then we have created by and actions actions okay good this needs to be status uh created at this is due date then we have created by created by and we're going to Output not the created by which is the object but created by do name and here we're going to Output um buttons but I'm going to leave these empty for now let's save this and have a look in the browser uh okay not bad uh the the um image is obviously very large we need to uh reduce that so maybe we can give that image um style and let's give it width of 60 for example okay that's that's fine uh I'm going to also increase the vertical pting of this um table header into three okay I think this looks better okay so that's that's I think fine um and we need these action buttons uh for edit as well as um for delete so let's define them I'm going to have um link so and that link it needs to be inera JS link okay that needs to be imported that link needs to be imported right here if the link is not imported you're going to see an error so the link was imported we're going to provide hre and the root will be project. edit and the root requests the project ID as well so we have to pass it project ID so and then let's just uh let's also give some Talan CS classes to that link text blue and and um again CSS classes are not important for this video um I'm just going to give it it for nice looking and let's give it text also edit so here is our edit button I'm going to duplicate this and I'm going to uh give it delete text as for the classes it needs to be following classes so instead of blue we're going to have the red classes and for the delete that needs to have also the delete or destroy destroy I don't remember uh by heart but we're going to see so we see these uh buttons right here and I'm going to give this T head just text right and I think now this when this is on the right side it is um nicely aligned so just to make sure that the texts don't uh fall in into the second line we can also give it text no wrap right here I'm just going to do this uh and then yeah that's it okay awesome okay now we need to take care of the pagination at the top uh at the bottom of the table uh right here I'm going to render this pagination but I'm going to create a separate component for the pagination I'm going to do this under Jes components which is a generic folder for um reusable components so in this components folder let's create pagination do jsx let's collapse the left side export default function pagination this is going to accept links as a prop we are going to return the following jsx so we need na HTML element with um the text Center and margin top four so inside there I'm going to iterate over received links so links. map uh we need link and let's return uh um this is going to be um inner Shas link so this is the class that needs to be imported okay awesome now this link needs to have um needs to have text as well so first let me just write link. label here and we can see how this looks like let's go back into index jsx and use that pagination let's hit the enter we're going to pass links to be project. meal. links okay so this is going to be what we're going to pass and actually that should be projects. met. links now whenever I save this if we check in the browser we see this pagination however we see these HTML entities okay just make sure that the HTML entities are are properly rendered we are going to use dangerously set HTML um attribute from the react so this is called dangerously set inner HTML which accepts um object so we're going to pass an object right here and we're going to pass underscore uncore HTML property to be link. HT um link. label so instead of rendering the link. label right here we are going to pass this dangerously through dangerously set HTML so whenever I save this now we're going to see these uh not the HTML entities but render them properly now let's apply some CSS classes to this link let's provide class name here and I'm going to copy and um paste the base classes and I'm going to obviously explain things so these are not the only classes we're going to provide actually let's use binding like this so these are the base classes but besides that I'm going to add conditional classes as well for example if the link is active and each link has this active true or false property so if the link is active then I'm going to add BG gray um 950 otherwise we're going to add an empty space okay and right here I'm going to put also extra white space we need extra wi space here as well because we're concatenating classes and we just need to make sure that we have wi space right here and wi space here as well and plus I'm going to add also uh like if the link URL doesn't exist if the link URL does not exist so then we are going to Mark the link as uh as disabled so I'm going to use text- gray- like 500 but I'm going to also use exclamation mark right here to generate this class with the important keyword because that needs to override that text grade to 100 okay I'm going to also give it csor not allowed class otherwise and we we probably need um white space here or I think we don't need because we don't have any more classes conditional classes but like leaving a whes space here doesn't hurt so if the URL does exist however we're going to give it uh on Hover um PG uh gray 950 as well okay so yeah this is the class name uh for each link we're going to provide also key as a because we are iterating over the links each link needs to have it own unique key we can provide link. uh label as a key right here and we obviously need to provide href as well which is going to be link. URL and if that doesn't exist or if it is null let's provide an empty string here as well okay so now let's have a look I'm going to save this and let's check in the browser and this is how our pagination looks like so when we click on this now the uh second Page open we see page two in the browser we click right here and the third page is opened and then the next button is disabled pay attention that when we navigate between Pages um we scroll at the top okay this is the default behavior in inera but because we have this single uh page application we can preserve the scroll if we add to this link Reserve scroll uh attribute prop okay once we add this then then if I scroll down below click on two we navigate between pages but the scroll position is completely remained so this is actually really awesome so the next thing what I'm going to do is just to uh display these pending completed and uh in progress um in a different colors as well as uh proper texts needs to be displayed right here instead of underscore uh we need more userfriendly texts now let's open project Explorer and under resources JS right here I'm going to create new file called constants constants JS we can call it JS X as well it doesn't uh it doesn't change anything but we are not going to have actually JS Expressions there so we can call this um JS and I'm going to again copy and paste uh several constants from here um you can find all the in the um GitHub repository of the project in the corresponding file like you can check this under you can see this under the project resources JS and constants and you can also copy and paste or you can go ahead and type this I initially typed it as well so but I'm going to explain what this actually does so this gives us the project status CSS class map so whenever the status project status is pending we're going to give the uh following CSS class to um certain HTML element whenever the project um status is in progress we're going to give that class for completed we're going to give it a green class and so on whenever the status is uh pending we're going to give render the following text for in progress this text needs to be rendered and we have the same thing for tasks okay so this is for the task uh text uh the state St CSS class map this is the task status text map this is the uh um and we have two more for the uh task priority okay so we're going to use that now in this index js6 in the place where we are actually rendering the status so right here so when we render the status I am going to use this project let's just um delete everything uh project status text map okay and that needs to be imported so that was automatically imported from uh bvs code and then I'm going to this is actually a map an object JavaScript object so we're going to pass it the project status and this will render the userfriendly text for each project so let's have a look um some think was ER resources JS constants JS does not provide a named export project status text map constant. JS why it doesn't provide project status huh here it is well it's strange it does provide named export yeah this is it uh what is that um child in the list should have a unit yes we don't have this key on the TR so we need to add that as well right here each TR needs to have key to be project ID I'm going to give it project ID now we're good if I just reload I don't see any erors but right now the texts are in userfriendly text we don't see this underscore anymore and I'm going to give it also proper CSS classes so right here I'm going to put this in a span okay and then I'm going to give the following uh class names to that span so I'm going to give it some um hardcoded classes like pting X3 and pading y one for example or maybe pading X2 pading y1 I'm going to give it also rounded and I'm going to give it also text white then wies space and I'm going to concatenate this with project um status class map for the given project status status so if I save this and have a look okay why I don't see the proper BG Ember 500 okay I think I know the reason this BG Ember 500 was added what if I change this file it needs to do this Rebel okay if I just rename this um into jsx so I think it's it's going to work uh obviously I need to fix that okay now it's working so basically the build uh the beat Builder which is on jsx files and uh for the taln CSS classes if we have a look in the taln config I I think this should be here so look at this so the talent config is watching the following files and right here we only have jsx file so it is only watching on jsx files but doesn't watch on JS file and because we named our um file JS uh talwin Builder did not had a look at the classes that was there but yeah we named it um JS X and it's it's working or we can simply duplicate this line and provide that we want to look at the uh JS files as well and then we can re uh just uh rename this back to JS yeah I'm just going to undo this and I will leave jsx but you get the idea so now we have this nice looking table with statuses we have the contextual colors as well as the userfriendly text the navigation Works um and uh the scroll is also preserved now let's Implement filtering of the data of the projects in the table so let's go in the index projects index and scroll down below and we have this T head and I'm going to actually duplicate this T head okay we're going to have the second T head there and I'm going to create the search input Fields under name and Status so I'm going to only Implement searching by name and Status so right here I'm going to put a field and here I'm going to put a field but for the rest of the THS I'm just going to leave them by its default values we can even remove this class okay so uh of course right now it was formatted but let's just put here um input what's the component name so there exists default components uh which comes with the Breeze Lal breeze so resources JS components and we have this where is text input okay so let's use text input component from components text input class that needs to be imported so let's have a look yep it was imported which is great where was that let's collapse this tbody uh we're going to work on this area and just like there exists text input I'm going to create select input component so let me actually copy this text input and create um select input because we're going to implement filtering by name and the status and the name is text input but the status is a select input so let's modify this select input slightly so it needs to have select input name what do we have so the tag will be select what else um here we need closing of Select inside in between we need children for the options and we're going to accept children here as well and I think yeah we don't need type so we can completely remove the type the type is for the input but not for the select so this is our select input which has the class name is focused or not children I think we don't even need this is focused for the select so I can completely remove that this use effect can be removed from Imports as well because we don't use it now if we go in the index jsx we can use that select input okay and that needs to be imported from component select input which was automatically imported okay awesome now what do we have in the browser so we have input um here and drop down right here but we don't have any options for the drop down let's give some CSS classes so I'm going to give it um W full to stretch this on full width like this uh I'm going to give this one also Place holder to be project name okay and we're going to add also uh event listeners on blur and on key press right here so on blur when blur happens uh we get the this event and basically I'm going to call a function called field changed okay or we can call this maybe search field change so I'm even though I'm going to implement only searching by only a name and status I'm going to make this method more generic so that you can easily add searching by another Fields like search field changed we're going to give it the name the field was changed and this is the project name and I'm going to give it also the uh value event target. value and let's listen on key press as well and whenever this happens we're going to accept an event in this in this call back and I'm going to call on key press I'm going to create a separate function on key press I'm going to give it also name and the entire event object as far as select as for the select Let's uh give it on change I think we only need on change so on change can move this uh I'm going to call I'm going to accept an event first and I'm going to call um search field changed we're going to pass the status the field name that was changed and we are going to pass event Target value as well so let me save this this is good now let's define this search field Chang uh right here const search field changed we are going to accept uh name in the value okay and then we are going to set this somewhere okay I'm going to accept right here a pro called Fury prams okay which by default is going to be null then let me check if the cury PRS is null so if the cury prams exist I'm going to take it but if it's now I'm going to give it an empty object so after this line I'm sure that my C prams will be an object okay it will contain some value or it might be an empty object so now whenever the search field is changed that cury parames is for search fields and again I'm making this more generic so that you can easily add filtering by other fields okay so whenever the this is changed if the value exists so then inside qer prams under name under name I'm going to set the value okay however if the value doesn't exist I'm going to delete quer PRS for the name okay so this is awesome I'm going to create a separate function on key press on key press we're going to accept the um the field name on which the key press happened in the entire event and then I'm going to check if the event key does not equal to enter we can simply return from here okay however if the key press happens on enter then I'm going to call that function search field changed and I'm going to give it the field name and I'm going to give it event Target value okay so this is great and now my assumption is that these qer prams uh will contain the available uh the the existing Cur parameters okay so let's let's first of all have a look at the res what we have so far so project name if I type or maybe let's just filter with the status um we don't have any options okay let's scroll down below uh here's the select input let's define couple of options so the first one has an empty value and um select status is the placeholder so then duplicate three more times we're going to have ending in progress and completed pending in progress completed okay great now we have those options right here so whenever I choose pending nothing really happens because we haven't actually done the main part putting this in the URL but I'm going to also open developer tools and console just in case we have some errors uh okay let's just reload the page yeah we do have some errors uh on CH okay this is wrong on change okay there are no more errors and if we scroll up right here search field changed so right here whenever this happens now my QR parameter contains the current cery parameters which needs to be applied the search parameters so I'm going to now use rotor from inertia JS react click on this make sure that the rotor is imported from inertia JS react and then on the rotor I'm going to call get okay and simply I'm going to do a redir I'm going to provide the current route which is going to be uh project. index which is the current root as well but I'm going to provide right here qer PR so this is going to be the qer parameters when we go to the following rote so I save this and now let me choose pending and look at this now inside URL we have a status pending if I change this into in progress inside the URL we have in progress if I type something right here and hit the enter in the URL we have name dollar but we actually lost the status so this is something we need to preserve right now so and I'm going to do this with the help of peck so I'm going to open uh project controller and right here when we have this Q so I'm going to basically uh get those Q parameters Implement searching and then pass those qer parameters to uh the project index as a qer parameters like CER param like I am let me close unnecessary files like I am expecting right here okay uh I'm going to close all unnecessary files cool so we're going to pass uh right here request quy which means that every query parameter will be passed right here but I also want to check if request if request name exists so this out to completion sometimes is annoying okay if the request name exists then no this is good okay then we need to add the following where so on C where name likes the request name if the request has status inside there then we're going to add the following we C we status is the request status okay I think this is good and then we are passing all the query proms to the um view okay However if those by default these query proms will be an empty array if there are no qu parameters we don't want to pass an empty array so I'm going to do if this is an empty array I'm going to pass null and whenever this is null then we're converting this into an object so this is how we want now let's have a look um just reload the page uh and I will also add one more thing uh applying the same value in these input Fields search input Fields so if I scroll down below this is our input field and I'm going to provide default value to be qu rams. name and for select as well default value will be query prams do status now look at this now we don't have any Q prams I'm going to choose pending now here we see pending here we see pending and also the filtering works by pending if I reload right now this now the status is pending we just reapply it and uh also the filtering works so if I type something and hit the enter then it starts filtering um okay um let's use this SE word on blur it filters so we have now this filtering working by project name as well as the status and obviously you can add more Fields if you want now let's Implement sorting of the projects by certain Fields first of all I'm going to go on the backend side and go in the project controller and I'm going to accept um two uh new C parameters for sorting so mine will be sort field from request I'm going to get uh sort underscore field this is how I'm going to accept and we're going to have sort direction as well this is going to be sortore Direction this is going to be C parameters and then whenever those fields exist we can we can also specify default sorting like if they if they don't exist let's use created at and the value will be descending okay and then on this query parameter I'm going to add order by order by sort field uh it should be singular so sort field with the sort Direction this is how I am going to order sort field and sort Direction now let's go in the index JS the react component and whenever the sort field and sort Direction exists they will be here in this cury prams okay and the idea is the following that we are going to click the table headers so this is the search T head I'm going to collapse this I'm going to open this above T head so these are the table headers and whenever we click on these table headers we are going to update that so I am going to use um I need to use multic cursor I am going to uh add onclick event listener on those columns okay maybe not all of them but I'm going to do this for all of them right now and then remove for the columns on which we don't need and then let's call the function sort changed okay we're going to call that function actually we are going to get an event and then call that sort changed we can we can pass the event but we don't care actually what's the event right now we don't care uh let's save this and what we do care is to pass the proper field names like for the First Column we're going to pass ID for the second we are going to pass an image uh but I think we don't need to implement sorting for image so I can remove this uh we need to sort them by name uh by status uh created it this is going to be due date and maybe that's it okay I can remove this I don't want to implement sorting by created by and I don't want to implement um sorting by actions obviously okay good now let's define this function sort changed so right here con s changed equals uh we accept the field name okay and now we need to do the following so we're going to check if the name of the field is the same as C prams sort field so this means that the if the field is already sorted by certain uh that specific field okay so if you are clicking on the name we are checking if it is already sorted by name then we just need to change the direction reverse the direction okay so then we check if Q proms sort direction is ascending okay then we're going to set C prams sort direction to be descending otherwise we're going to set the cery pr sort direction to be ascending okay this is good however if it is a different field so if we are trying to sort it by a different field then we're going to set cury params sort field equals New Field and sort Direction oops sort Direction equals uh ascending so by default when we are sorting with a new field the direction will be ascending and finally we are going to call that rotor get and passur proms okay great now let's have a look uh let's open developer tools just in case we have some errors I'm going to click on name something happens okay sort field equals name sort Direction ascending and as you see it looks like it is sorted let's set this uh status which means that we are basically uh showing all the statuses and we have now sorted great if I click on name again it should do the sorting by descending and this looks also correct if I click on status this should do sorting by status okay we have first completed and then everything else if right click again then we have all pendings so this seems to be working by create that and by due date due date ascending due date descending okay this looks good so this is definitely working but we need some kind of indicators that using which column the table is sorted right now and I think we also don't have this table as a responsive table so I need to scroll down we have this table uh okay and I am going to put this table in its own div and let's give this div overflow Auto and inside I'm going to put the table now now here we have this horizontal scroll good and down below we have this spination okay this is nice now we need to add this indicator using which column the table is sorted right now so for this I'm going to use hero icons okay and I'm going to go onto hero icons GitHub page and let's see we are going to install this for our react mpm Install hero icons react now let's click on this and bring up the um terminal one of the terminal you want and let's execute npm Install hero icons SL react DS and then we're going to have a look at the list of the hero icons uh browse the full list of Icon names just click on this it's going to give us the full list names and I'm going to search for Chevon which is an arrow if you want to see visually what icons are available we can use use hero icons.com oops what's this hero icons.com and we can see all the available icons if I just type Chevron we can see that I want to use Chevron down and Chevron up those two icons and as you see we have Chevon down icon and there will be Chevron up icon so this is what we're going to use okay that was already installed we need to go Vite make sure that the Vite Server doesn't break uh uh let's just stop this and restart just in case whenever we install some new package sometimes uh it doesn't detect that so just to be safe okay now we need to use these icons let's start with the let's collapse this T budy and let's collapse this T head as well which is the search and this is our headers and we have the sorting by ID as well which we have not tested by the way click on this click on that okay it works okay let's use now Chevron I think the out completion doesn't work right here but we're going to use Chevron up icon and we're going to use Chevron down icon and we're going to import them from package react [Music] um how we're going to import let's go back into GitHub page I like this so let's just write this this is the view version but it is this I identical for react okay anyway let's put this right here uh hero icons react react uh this 24 is just the uh size we can use any size I'm going to use 16 hero icons react 16 and we need Chevron Chevon up icon and we need Chevron down icon cool now here we are using CH up icon let's give it class name uh W4 with four and let's duplicate this and we need Chev on down icon as well now this is the ID column let's have a look now you see these two arrows right here perfect now let's give this th the following classes uh Flex items Center and justify between okay no we're going to put these two icons in its own div now that's more like it okay and I'm going to give this second one also minus minus margin top two to move this a little bit up so that these two icons are very close to each other and I'm going to give also Gap one between this ID text and the icons just some space this is it now I need to copy this uh we don't have the Sorting for image it is not sortable but we can put this in the name uh we can put this in the status in the create date and in the due date and also we need the following classes Flex item Center justify between for those sortable columns for the name for the status for the create date and for the due date let's save everything oops what we did what we did okay let me undo the changes what I made okay this is good let's now redo the changes what I made uh I'm not able to redo the changes anyway so we need those classes so let's these classes to the name that's fine to the status now when I have this two status what is going on this flx and items Center and justify between whenever I add this to the status something strange happens let's inspect this one two three why is this down below 5 six 7 one two 3 4 five six 78 maybe I deleted something uh 1 2 3 4 five 6 7 eight it is eight there as well 1 2 3 4 five six 7 and eight okay I don't I don't know what is happening here I think I know the reason why this is broken as soon as we add the flex because each table header has its own display property given by the browser as soon as we give it a flexes um we are ruining it completely so we shouldn't give flexes to the th instead the ideal solution will be to create one extra div inside th and give it give all these classes to it um what if I get everything from here okay then I'm going to create div I'm going to give all the classes is to the div and then the name as well as the icon are part of that div this is for the name let's see how name looks like it is looking nice let's do the same thing for ID let's define this div and the closing section right here save that but we can remove all the classes from this th this is ID I think this is looking good um now we have the status so let's get this div remove all the classes from th and wrap the status as well as the icons inside that div this is status oops this is the de get that opening um and we need that icons for the due date as well so we can put this right here and let's remove class name from the due date from created that and from oops I'm mistakenly almost closed this file okay now look at this so this is looking good so we have these arrows and I think we also need cursor pointer so when wherever we have this um G one here and here and here and here yeah and that's it uh yeah we need to add cursor Dash pointer save this and now we see the cursor pointer on the sortable columns uh we don't have this on ID which we need Cur pointer awesome okay now whenever we click on the name the Sorting Works however we need to also indicate that this is now sorted by that icon and um I think right now uh we have a lot of a lot of um repeated code let me finalize this and then we can try to improve prove it and make this reusable okay but right now we are in the ID column okay and whenever the um current sorting is by ID ascending I'm going to highlight this section so I am going to change this into like this okay so we have this class W4 uh plus I'm going to give it extra class and that class will be if query prams do sortfield equals um equals ID okay and if the query prams do sort Direction equals ascending so then we're going to give it text white color otherwise we don't give it any CSS class now let's save this this uh and click on this now look at this the the upper icon gets white so this is an indication that this is sorted by ascending now we need to do the same thing uh we need to preserve this minus margin top so we can do like this minus margin top two and if the Q pram sort field is ID and if the direction is descending then we highlight that otherwise we don't add anything now if I click on this ID again something happens I think we need space here that is okay now we see arrow down below click on this Arrow up click on this arrow down below okay and we need to do the same thing for all the other fields but again as I mentioned so we have kind of a repeated uh code for every column which is not ideal if you building something production ready you don't want such type of um repeated code for every column and even if you are doing more and if you have multiple tables you're going to have this repeated code across multiple tables so what if we try to create new component under component section and call this uh table heading. jsx okay let's try to um let's try to export all all these things right here so export a default uh export default function table heading we're going to accept some props don't know what props we're going to accept yet and we're going to return uh the following th so I'm going to get the entire th for the ID okay put this right here save it now what variables do we need okay so we need sort sort field and we need sort Direction and we can call this table heading here table heading which needs to be imported and it was imported which is good uh but we're going to pass sort field to be C Rams sort field sortore field and we're going to pass sort Direction which is going to be Q pam. sort Direction awesome so we have those two Fields uh which we accept so we can remove that we can remove this we are going to pass the name of the field which we don't give name needs to equal um let's give it uh ID I'm just thinking um if this is going to be an optimal solution but I think it's it's going to be okay no problem so we are we're going to pass the name so we accept the name here and then we we're going to pass also whether this field is going to be sortable or not we are not going to always render the following div so sortable by default equals true and by the with the sort field and sort direction we can give it default values then we're going to render this div only if that column is sortable okay if this is sortable we render it if not we don't good and these classes can stay there no matter if it is sortable or not we can leave this but we have name right here which we need to pass here and in this place we can just output children okay now if we come here we give it name the sortable by default is true we give it sort field and sort Direction and we output right here ID and whenever whenever we click we need to call this sort changed I think we're going to accept the sort change right here as well which we can specify that this is by default an empty function awesome now we can also pass sort changed we can call this function sort change now what just happened go into projects we have an error children is not defined obviously we need to accept the children from the props reload the page now the ER is gone let's go into projects we do have this one more error Chevon up icon yeah that needs to be imported so this is these are the icons what we need to move into um maybe not cut right now but let's just copy into table heading and we need to put this right here okay let's go into we need these um navigation icons for the mobile version as well to add there but we have one more error Chev up icon is not defined it is defined swear cury prams is not defined cury prams where is the cury prams is it used here uh yeah that needs to be sort fied in sort Direction directly without C prams uh okay we don't have any more error the ID looks good if I click click on the ID it is sorted by ascending click on the ID it is sorted by descending okay and now if we go in the project Index this is how our uh table looks like compared to this and this is um this is much larger you agree okay and now we can go ahead and duplicate this uh for the columns which we want to make sortable like we can put this right here and we can type name here and name here uh we need to put this here which is for the status we need to put this here which is going to be for created it create date and for due date awesome so let's have a look I'm going to sort by name let's reload it is sorted by name ascending but it is it is not white okay here's the name okay so let's see what is sort field and sort Direction I'm going to put this output right here next to the children sort field and sort Direction name ascending then if the sort field aha here we have this ID this is the problem instead of ID here we are going to use name and right here as well instead of ID we're going to use name we save this and now we see this uh properly let's remove the sort field and sort Direction now this is sorted by name ascending now this is by descending and for this status as well good and just like this we have in implemented sorting our table uh by certain columns in ascending or in descending now I'm going to create the tasks table in a similar way how I created the projects table I'm not going to implement every single feature on the tasks table what I implemented on the projects but I'm going to just show you how you can have Global tasks table for all tasks but how you can also have tasks table for your specific program project so we're going to add a link right here whenever we click on the project um right in this area um it's going to open the project Details page and there will be not only project details but the tasks filtered for that specific project okay and I'm going to create the tasks table which will be reusable table used for the all tasks as well as for the project tasks and then on the tasks you can implement the sorting and searching just like what we did right here I'm not going to um spend more time on this because I think this is very familiar functionality already but now let's go into uh views uh resources JS pages and what I'm going to do is create new folder called task actually let's call this task in singular and I am going to copy this index jsx from Project into task and paste okay now let's open this task uh index and have a look so we don't need this cheron up and down icons in the index jsx of the task also we don't need this in the project uh index jsx uh let's close everything and focus on the tasks so I'm going to search inside this file uppercase project and replace this with a task uh replace all I'm going to search for lowercase project and replace this with lowercase task so this is how I'm going to do okay and I'm going to also search for uppercase all uppercase project and replace it with all uppercase task okay good now I think there is no uh project mentioning with uppercase or lowercase in this file which was copied initially from the uh projects now let's open task controller go into index and I'm going to also open project controller and I'm going to copy this part and put this in the task controller and let's adjust this so first of all instead of uh project we need we need task model which needs to be imported like this so task quy sort field sort direction we need that uh we can have this on the backend side I'm not going to delete the request name as well as the request status um that's fine uh then what do we have so we're going to have task index uh we're going to pass tasks here that variable needs to be called um tasks and instead of project resource we're going to use task uh resource task resource does this task resource exist yes it it exists okay and I think we also don't have project mention here which is fine if we open task resource we need to implement this and return the proper information so let's open project resource and copy few things from here not everything from here basically so ID name description created Edge due date status we need priority we need image path uh created by uh we need also assigned user assigned user information uh okay good and what else do we have let's open create tasks and table migration signed user created by updated and the project ID and yeah we need this um project as well which needs to be passed into project resource so I'm preparing everything for the task resource so this carbon needs to be imported right here so we have this every field the project is a relation into project but we're going to return the project resource instance from here which on its own will uh return the following type of object okay we are doing the same thing for the assigned user created by and updated by however the assigned user might not even exist so maybe we need to do the following check if assigned user exist then we return the uh resource if not we're going to return null now let's open uh task. PHP and we need to Define these relations okay belongs so we need project like this we need assigned user which needs to be related by assigned user ID okay and we need also created by and we need updated by okay good uh we have this task resource let's open task controller again I think everything is good we are returning tasks and cury prams now let's go into browser and click on all tasks and here we go um it is working we have all the tasks sorted by create date I think I think this filtering in the Sorting will also work because we just copied everything from the projects right if I just reload um the images not all the images are available they are coming okay let's try to filter pending this is working okay good um yeah filtering is also working and if we just sort by ID this is also working so everything is working on the tasks now what I want to do is to use that task index that component inside the inner view of the project okay so if I go in the project I'm going to implement a link uh from here whenever I click on this it's going to open the project Details page and I'm going to render the same table this exact same table uh but filtered by uh by specific project now let's open project index file index jsx file and I'm going to create link uh whenever we click on the name so here we have this T budy and here is the name so whenever we click on the name we are going to redirect to the uh project Details page project show page so first we're going to use this um link right here let's provide hre Road will be project. show we're going to provide the project. ID this is the TD I'm going to change this into T and also on Hover I'm going to give it underline on Mouse overover just give it underline to um or user interface okay and I'm going to give it also text white uh yeah text no r as well uh maybe text just gray 100 again I'm spending time on UI things anyway so now whenever I click on this this opens the project Details page which right now doesn't exist and we're going to create that so for this we're going to open project uh controller and we're going to go into show and we are going to return inertia uh project SL show and we are going to pass the current project as a resource so this is going to be new project project resource and past the current project now let's go into resources JS uh Pages project and there I'm going to create show. jsx okay awesome now let's export default function show we're going to accept here project we are going to return the um following thing so we need to use authenticated layout so let's just use authenticated layout like this let's go into index and copy the layout related things for example we can copy user and header put them here uh we need to obviously accept Al because we are using it this is going to be a project a specific project so let's do like this project and in double quotes let's just type project. name okay so we are going to also output head we the title the title is going to be this so it's going to be the same and then down below we are going to have very similar layout so I think I can copy almost everything maybe let's just copy oops let's just copy these two things where where's the table so this is the table okay let's just copy this part okay this is the one ending div this is the second ending div this is the third and this is the fourth good now this is show project show area do I have anything missing I think I don't now let's click on this and this shows uh the here's the project I find but here we see show why it is Project undefined don't we pass project we pass project from the project controller okay let's print what is this project Json stringify project it has data okay what we need to do is uh go into project controller and we need to disable a w so on public static uh WP equals false just like this we disa the wrap now this is the entire object and here we see this project title okay now now going to display the project details uh right here let's remove this PR and this is the place where we are going to display the project details so I'm going to have two such type of sections one is going to be for the project details and second is going to be for the tasks table okay so here uh let me actually copy and paste um couple of HTML part because this is fully this is going to be full HTML okay so this okay so this is going to be the Project image so here we have it so it has a full width and fixed he and object cover so this is how the image is going to look like then we are going to have outside of this outside of this Steve I'm going to create one more div and I'm going to give it the following CSS classes pting rounded and PG gray and text Gray so inside there uh round it should be only at the bottom I think I don't need this sorry okay excuse me so let's just let's just forget that part and uh I'm going to give this one different classes like let's give it a grid and I'm going to give it Gap one and I'm going to give it uh G calls two okay and inside there I'm going to create uh one two main Dives this is on the left side and this is going to be on the right side and on the left side we're going to have different sections like um this Steve um will have a label and let's remove this HTML 4 we don't need project project ID is the label and inside paragraph we're going to Output project. ID okay and I'm going to give this paragraph margin top one I'm going to give this label um font bold and text large so let's save this and and have a look project ID one okay good now let's give this div margin top two as well to create some space between the image and this one good and then I'm going to duplicate this and we are going to Output project name and here we need name as well but we're going to give the Steve margin top like four to create create enough distance so we have the project ID we have the project name and in this exact same way uh I'm just going to now paste few more things like we have here we have the status so we we output the project status um we simply output the uh project text from this project status text map which we are using in this index um table so if we check right now inside the table in the tbody let's collapse T head here and here and in this t- body we have the following section right just to Output the text as well as the class so actually what I pasted is slightly different because I developed previously slightly different you can forget about this now but this is this pan so I'm going to copy span and I'm going to put this right here so we have now project status with the correct badge but these two things needs to be imported so just make sure that this project status class map and project status text map is imported let's copy this section and in the show let's put this here now this is the project status label and now let's output dates as well and I'm going to Output um I think we need to Output created by as well so this is the status let's output created by project created by name here we see created by as well and now let's output dates so I'm going to put this in the second column basically I'm going to delete and completely replace it and this is the entire column which I just replaced okay you can go ahead and type this so here we have the due date we have the create date we have the updated by so we have everything so I save this and this is how it looks like so we have every single detail about the project the only thing what we don't have is the project description so we have these two columns here and this is the first call okay just below that grid I'm going to put one more div which has this margin top for the project description and the entire project description so this is the project description so we have every single detail about the project however I think we can move this image this is the image section A little bit up like this has pading six maybe we can put this above that so we are going to have this nice image without pading and then all the image uh all the project details down below and at the very bottom we are going to have uh just down below uh we're going to have the table details I think we need to copy this entire section like this entire section okay and no I think yeah I think we need to copy and I'm going to paste this here but obviously I'm going to remove uh most of the part so this is the Ping okay I'm going to remove this the project details I'm going to remove this image and this is the place like this is the place where table goes here if I save that then we see table goes here and this is going to be where tasks will uh will go however how we can use this tasks table which is actually a page so it is a a page component it has its own layout if we see and um it's own head and everything so we cannot simply use the same component inside project details but instead we're going to create reusable uh tasks table component so inside tasks I'm going to create um task tasks table. jsx then from the tasks let's get the table with its overflow Auto because that is um the Overflow Auto is necessary for the responsiveness with a pagination as well okay so we're going to get this out from here go into tasks table and let's implement this export default function tasks table we are going to accept um tasks I think this is the only thing what we need and then we're going to return um inside fragment let's put these two components so we have the main div for the table and the pagination now if we go into the tasks Index right here we are going to use tasks table and we're going to pass tasks now let's see first of all how this looks on the global tasks page it is broken let's see what is the error table heading is not defined uhuh I see so here we have table heading imported we need to take this out and put this in the tasks table I think we need to move a lot of imports basically so this is the table heading if I just reload uh I think it was fixed or wait let's open developer tools and let's go into all tasks so we have another error this is query prams is not defined okay uh I think we need to accept quary prams as well quary prams uh right here and we need to pass those quer prams as well so let's pass Q prams pams we will have more errors I'm pretty sure and we just need to fix those errors sort change is not defined okay so we have that sort changed here uh on key press as well we see that now this is unused uh vs code tells me that on key press is declared but it is its value is never used that's probably because we moved that into tasks table so I can get this this search feel changed uh I think this is also unused so basically I think I'm going to get everything from the tasks table uh like this uh from the tasks index and move this into tasks table okay but let's have a look we have also unused Imports so those the the pagination for example and the select input and text input we are used inside the um table but now moved into tasks table so we have to actually take those inputs out go into tasks table and put them like this uh also those statuses we need to put right here and also this link and rotor so I'm going to copy this line delete link and rotor from here go into task table import them and I don't need head so I can remove head from here now if we check tasks table and reload the page we don't see any errors and we see tasks table okay let's test if it's working pation is working filtering is working sorting is working so everything is working on the task table like it was working before now if we go in the projects and click on a specific project we're going to use the tasks table right here so let's open this project show and let's use now tasks table here but we are going to obviously provide tasks and quy prams but do we accept tasks in Cur prams no we don't so we need to accept tasks here and uh cury Rams uh and I think also uh let me close unnecessary things I think also when we are like a normalizing cury programs here we can move these into tasks table so we accept query prams and we normalize them right here by default this can be null now from the show uh we just take these tasks and Cur prams and pass them right here in the new tasks table qu prams quary prams okay great and we normalize the C prams right here the only question right now is to pass these tasks and Cur prams to the show component from the project controller so here we are only passing um project we don't don't pass tasks or anything like this which we need to do right now so let's take uh tasks equals on Project we can call tasks okay and um this is actually good however for the order by yeah I think we can uh use this order by as well if we open task controller we need we need this part so I'm going to get this grab this code this here however we need cure so what I'm going to do is just get this and call this quary so now on qer I'm going to add filtering and filtering by status whatever and then on quy I'm going to call order by like this with these fields then we're going to call pinate and then we're going to call on each side so I think that's identical so the only difference actually is that how we're going to get this so I'm going to get everything for what we have for the tasks and this is how it's going to be so the only difference is this line so for project controller show we're going to get the project tasks filtered by project but for the task controller globally we're going to get all the tasks okay awesome then we're going to pass tasks here again we can copy this part to pass tasks and we can pass the same way Cur proms however I think task resource is not imported so hit the ENT enter and here's the task resource now this is imported as well so this is the project show we pass now tasks and C progams now let's go into project click on specific project and here is the table here is the table for tasks of specific project there is only three page uh which proves that the this is filtered by project awesome okay and one additional thing obviously we're going to remove this margin top it's it's too much um I'm going to it's a visual part but it's a very easy to thing remove uh so let's just give it pting X12 maybe what wait no pting bottom 12 okay um one one like a real world type of scenario will be that whenever we are displaying all tasks we don't know which Project Specific tasks belongs to right so in ideal case we need to display the project name as well in this case so that to to easily identify which project the task belongs to and maybe um we should have this filtering by uh project as well in this area filtering something which I'm going to skip but uh let's Implement display the project name right here so if we have a look in the task resource let's open task resource we are returning project for each task so now if we go into tasks table this is the table we can actually add a project name here and display that so like just before this name I'm going to duplicate this and let's call this project name in terms of whether we're going to have sorting or not I think we don't need to have sorting um maybe we can just should change this into th like duplicate this line and call this project name yeah let's remove this part and let's scroll down below in the tbody area we need to duplicate uh create one more th for this filtering section as well so that make sure to have the same amount of th elements in the first th and the second th let's collapse this and then I'm going to create right here duplicate this and output project task. project. name so I save this and now we see project name here uh this is visible on all tasks as well as if we go onto a specific project page uh we see it right here as well but we can hide that when we are on a specific project page we don't need it so how we are going to do this we can simply add one more one more configuration um like prop in the tasks table and let's call this um hide project column by default it's going to be false so we don't hide it whenever this is true true then we're going to hide it so this is it this th should only be visible if not hide project column like this if not hide project column then we're going to render this let's scroll down below um let's expand this th this is one extra th so that is before the name right so this is the project name so we are going to only display this if the high project column is false like this and then we're going to only display this if hide project column is false awesome and then from the project uh show. jsx we are going to pass hide project column equals true now I save this and now we don't see this project column when we are on a specific project page but when we go on the all tasks page we see the project name here as well and the task name itself and um and everything basically basically what we should see now let's Implement creating new project let's go let's close everything basically and I'm going to open project index and right here um next to the H2 I'm going to create a link um and there's going to be a button like add new let's give you proper proper CSS classes so those are Ty and CSS classes but I'm going to wrap this H2 and Link inside um either div or fragment but I think I'm going to put this in the div let's give it class name Flex justify between and items Center and let's provide this link hre is going to be root project. create now let's save this go into projects and we see this add new button whenever I click on this it doesn't do anything because we don't return anything from from the uh project controller create xtion ction so let's open project controller and find this create action we have the store and this is create return inertia uh that's going to be project slash create let's go into project and I'm going to create create. jsx file export default function create uh we don't accept any argument we don't need anything we can just return um some markup and we're going to use authenticated layout like this and we're going to provide this uh user as well as the header that's something is messed up like this okay but this is the create so we don't need this link we need create new project title and then where we will need form right here so let's copy this uh head as well as the template I'm going to put this here and then we need this closing D Tex and this is going to be form so I save that and click on a new something is broken out is not defined okay we're going to accept out because we need out every time we're going to pass this into authenticated layout uh so why cannot we accept out directly right here why why are we passing every time user we can simply accept this out can't we we can can sure we could do this anyway so now let's click on this add new we have this issue head is not defined okay head is not imported here's the head now it got imported and now we see right here form and this is the place inside which we're going to actually render the form in the the create jsx uh right here let's define form HTML form tag oops those are the CSS classes which uh we will need on that form so I'm going to provide these CSS classes and T one CSS classes nothing special um and inside there we need the different sections for different fields like we need um image path we need the name the description status and due date those those are the main Fields we're going to implement we're going to also add on submit event handler on the form itself and let's define now a div that's going to be a section for uh the Project image but before before I continue right here I'm going to uh Define the inertia's form variable use form basically so inertia provides the for working with the forms um ability so we're going to use form use form okay that used form needs to be imported and that used form accepts an object so we're going to provide all the fields the form needs to have like we need to provide an image we can we need to have a name we need to have status uh we also need to have description and due date okay so this return returns form object and let's destructure that form object and take out what we need like we need data so data finally is going to be an object which contains image name status description and um due date so we are going to also have set data uh function using which we need to set the data so we're going to also take out post and that post is a function which we need to use to send the request okay additionally we have more information like processing for example which indicates whether right now the form is in processing progress or not uh we also have errors variable right here and we can also have a reset uh function to resist the form completely okay I'm going to Define right here on submit uh function as well which accepts an event and we're going to call event prevent default and then after this I'm going to call Post function which is this post function but I'm going to do post on root project sl. create okay and that post needs to know what is the data what data needs to be passed to the the server okay and just like this we're sending the post request on the following route passing the data the form knows now the question is how we're going to populate that data so this is the data and this is the set data function which we're going to use to populate this let's scroll down below and this is one div so I'm going to create now um input a label which is the component uh which comes with the lateral Breeze okay that um input label has HTML 4 and we need to provide an ID right here let's just provide Project image path so this is the first property and I'm going to provide also the value which is the actual label uh text and that's going to be Project image okay cool now let's use second component text input component and both of them input label and text input needs to be imported okay make sure that they are imported otherwise you're going to see an error okay then they we have this text input which has more Fields like we need to provide ID which needs to be the same thing what we provide in the HTML 4 okay good uh we need to provide type which is file in our case um we need to provide uh name which is going to be image uh we need to provide value which is going to be data variables. image so this is the thing okay and we're going to provide also some additional class names like uh let's give it a margin top one and block and W full and on change whenever this is Chang so we get the event and we are going to call set data we are going to pass the first arguments in the set data the field name image and we're going to pass event target. value okay let's save this and have a look so this is our input however we have so many HTML elements I think we don't need this outer div okay nice so this is the Project image and we need now the same thing for the project um project name um the project description input and status I think we also need to display the validation errors so I going to use it's called input error this is a ready component which comes with the uh plel Breeze again input error and this input error accept message and we're going to pass errors. image in this case and we can provide the class name as well U margin top two okay so since we have this ready now I'm going to copy and paste the similar thing for the project name and I'm going to obviously explain so this is the project um image so let's collapse this I'm going to paste the project name here this is the div it has just margin top to create distance between the image path and image name we have the same input label we have the input text uh right here we have the name we have the ID we have um everything similar except this is focused whenever we give this true by default this is going to be the field which will have focus in the set data uh we pass a name and the value and inside input errors we have this um errors. name if we save this and have a look in the browser we're going to see project name right here and whenever we reload this the focus is inside the project name okay this is what this is focus basically does so in the same way I'm going to now collapse this and paste the project description the only difference is that we have text area input which is a new component which I am going to Define right now but imagine that this is a text area everything is the same okay HTML 4 value ID name value on change we do this and input error has the errors description and margin top okay now let's create this input text area we're going to do this under components actually let me copy this text input and call this uh input text uh text or input or how how how what was the name I just forgot text area input in the components it should be text area input okay here we need text area input as a name uh type text is not necessary uh here we don't need t uh type uh we need text area here and I think we can leave everything we can obviously output also children here because this is a text area it might have some content inside so let's accept children here now let's go in the create js6 and this input text area input needs to be imported text area input okay that was imported awesome so if we save this now and have a look in the browser we see the project description as well awesome and now I'm going to copy and paste the other two Fields as well so let's paste both let's collapse the last one first so this is the project due date project deadline so this is everything what we have so it's very identical you can pause the recording and just type this I just want to uh reduce the total video duration because the larger the video gets um the more complaints I actually get uh so yeah this is very repetitive thing and I'm going to try to also speed up and save my time as well uh but you can um just pause and type this I was actually going to pause this but I'm just trying to save my time and if if this is something annoying please let me know in the comment section as well just I'm trying to save some time for me as well while doing the repetitive things okay if you have any questions again um just ask in the comment section but I think um it's very very identical what we have already done okay so collapse that part expand this so we have the project status we have the select input which we have already used in the table for searching okay we give it Name ID status on change we set the status and we have these four options uh here we can also give a text please select status or just select status okay awesome so we save that and have a look in the browser uh we have some error what is the error select inut okay so this needs to be imported okay it was not imported sometimes it is imported sometimes it is not imported select input let's hit the enter no it is not imported so in in in this case either you have to type this manually this import or what I found that if you start typing select input hit the enter Then it does the UT here is the select input okay then I can delete this so this is already imported reload the page and we see this project status and finally we need button we probably need two buttons let's call up that uh we need let's create one div I'm going to give this margin top four and I'm going to give it also text right and let's give it two buttons okay one for the cancel and second for the add new so I'm going to use a link for the cancel button that's going to be inertias inera js's react link uh let's write text um cancel inside let's provide class names Tales classes and let's provide inside H rev root project. index so we're going to go back into project list okay whenever we click on cancel as for the button it needs to be a regular button and we're going to uh give it the following classes so PG Emerald 500 some horizontal ping vertical ping text white rounded Shadow transition and onover it changes the color slightly and that's going to be um submit maybe so let's have a look we have this cancel and submit buttons uh that is great the cancel button is a little bit smaller in ha because this is a link this is um submit we can give them both the same text size like text uh text SM for example and hate uh8 just as an example it is too small H 16 um that doesn't work for this link because it is actually uh inline element so I think we need to provide inline Das block here now this is how it works uh okay let me just undo this not minor things you can figure this out I'm just trying to focus on um function ality and now whenever I hit the submit button it should make the post request sending all that information okay let's just provide um project name some test description let's provide date and the status and now I'm going to before I submit this I'm going to go on the backend side uh go into project controller I'm going to close everything basically except that create so let's open create jsx and open project controller and let's go into store and this is the store project request is the one which we need to take care of inside authorized for now I'm just going to return true and inside rules we are going to return what rules do we have so I'm going to make name to be required and it needs to have maximum imum 255 characters so then we're going to have description which needs to be string we're going to have due date which needs to be nullable so it is not required and it needs to be valid date and we have status which is required and it has rule in and I'm going to provide what options it might have pending is one option in progress is second and um completed is the third okay and uh you can create also Anam out of these values and provide Anam rule which is probably best solution um and I really encourage you to do this but I'm going to leave this because I'm trying to focus on different things um in this tutorial so eliminate validation rule this is what we need to include okay now if I go in the project controller I have my request class ready so if I go into project controller and I'm going to get all the data from project uh not the project but um request validated data then I'm going to just dump and die let's save everything and I'm going to also open network clear it and hit on submit button now let's see post method is not supported for Road Project create supported methods get head put patch delete okay um project create maybe this needs to be project store the root needs to be project store because I think the create is just to render yeah I think so so if I click on submit now we see that awesome so we have name description due date status awesome so we have every information what we need and we also need to Define image image needs to be a valid image I think we need to specify also inable so we save that uh let's choose an image click on submit image field must be an image why this is not an image um I think we need to check the validation part of the LL and let's search for image okay uh the file under validation must be an image jpg jpg okay what do we send okay we're sending this as a we're sending this as a uh regular string okay this is interesting uh okay let's skip that part and we can come back to this first let me just create the project without the name okay project name uh project description then we can choose some date and Status okay and whenever hit on submit we get the whole data now let's go into project controller and I'm going to open project. PHP file and we need to um provide feelable right here okay protected feelable let's define all the fields uh we have what do we have image path we have name we have description we have status we have due date we have created by and updated by do we have something else uh let's check create projects table migration yeah I think we have just provided everything what is available in the project and then let's call Project create passing the data this is going to return created project and then we can return to road we can redirect user to Road Project dot project. index uh okay once the project is created we redirect user to project index page where the new project will be available so let's close this I'm going to click on submit and let's see we don't provide created by which is required uh okay so we can add this created by right here data created by is going to be out Al ID and updated by we need to import this out um facade and updated by is out ID as well so let's close this and click on submit okay project not Road Project not defined to Road ahuh here we just need to provide the road name whenever we have this two road we don't need to actually pass the result of the road function but this accept a name I think the project was created because the error was right here so I think that completed successfully let's check uh let's create project two and hit and submit now look at this so two projects pending statuses project one and project two those are the one what we just created now let's display also success message when the project is created let's go into controller and whenever we are about to redirect user to a specific page I think we can provide with as well with some session name like let's give it success and then the message um project was created how ever we need to get that success message and use that into a different place so we are redirecting this into project index then right here in this index we are going to pass success which will be session success whatever name we gave right here with the S session name session variable name then we take that success so now if we go into project index project index and we are going to accept uh right here success so this is the success variable and we can display a success message right here for example div uh class name BG Emerald 500 by Y 2 pting X4 uh text white and round it something like this and we're going to Output the success but we're going to only show this if the success variable um is available and if it's there so I save that uh by default uh let me just show this all the time just to see how this looks like and we can type lpsum here okay this is the message which we should probably put maybe here or maybe here I don't know let's put this here and give it also margin buttom margin buttom four so so yeah that's fine uh and we're going to only display this if the success variable is there and if it's available like this okay now let's click add new I'm going to create project 3 some description and let's provide uh input progress status I'm going to click on submit and we see we shouldn't we should have seen success save and we see project was created success message now let's take care of file uploading so whenever we choose the file I think that file is not properly set inside the data and the reason let's close the index let's close the project migration and right here okay so this is the input this is for the name this is for the file uh we call set data image even Target value even Target value is something we don't want we won't even Target files at zero okay and then when we print data image we should see that let me just test this data image what is data image open developer tools reload choose an image we see this error okay uh we are not able to print that but I think now the data has the image inside so if I just choose image H uhuh yeah we also don't need to provide the value so this this is something we need to completely remove just like this now we choose an image the image is there let's provide name description and some status and I'm going to also open network clear and hit on submit button so I'm curious if the file was given uh it doesn't show the payload what we just passed because the request completed successfully this is um sometimes how Google Chrome displays that information anyway so we're going to uh go into controller store and we're going to get the data and we're going to dump the data in die so now whenever I I'm about to add new project click on submit description field must be a string okay this is something we need to fix as well the description needs to be nullable click on submit and now look at this so we have this image which is uploaded file awesome now we need to take this image and save on the file system and then uh return the property URL so let's get the image from data image if that exists otherwise we're going to get null once the project is or before before the project is actually created so if the image exists we're going to save that image so image uh that image is basically uploaded file eliminate HTTP uploaded file so I'm going to add an annotation right here so variable um image is uploaded file actually my PHP storm always understands this but the vs code doesn't have that great support for these doc blocks um and whenever I Mouse over on this image in PHP stor it understands that this is an instance of uploaded file now maybe we just need to provide the fully qualified name which will be illuminate HTTP uploaded file but I doubt it's going to work illuminate http P uploaded file okay anyway so on that image we are going to call we're going to call a save I think I'm going to call store here and provides the um path and the second option can be a dis inside which I'm going to store this so this is the project uh image so I'm going to store this under uh project dish maybe provide the project ID but I think we don't have the project ID yet because the project is not created so I think we need to Generate random string and put that inside okay inside project folder then I'm going to use St Str facade generate r random string uh St St that Str Str needs to be imported let's use illuminate support faad or it's a helper illuminate support Port St Str this is it and this one has I think random yep it has this random function with the default 16 so it generates random string so down below where is it where is that store here so Str Str random is the path inside which I want this to be saved and the disk is the public so I'm putting this so this is going to return path which I'm going to put inside data image path just like this so if the image exist I'm saving and dating data with the image path and then image path will be saved in the database the only thing which I haven't done is link the storage into public so let's let's execute PHP Artisan storage colum link so now the link was has been connected so Public Storage link has been connected into storage app public okay this is good and now let's try to [Music] upload an image yep I'm going to click on submit and um project was created so the image is broken something was saved in the database okay the image is broken we're going to see if the file is available on the file system now it should be under storage up public under project this is the image and this is great so the only thing what we need is to properly return this image path and we're going to do this in the project resource uh whenever we are returning image path we're going to check if the image path exists we are going to use Storage storage facade uh URL and pass this image path we're going to pass in this here if the image path doesn't exist we're going to return empty empty string so let's move this down and just like this I think we should see this is our project image everything else now will be broken because those are full URLs um in the database and that's totally fine um finally uh at some point we we wanted to delete them but right now we have possibility to upload image on our project as well which is awesome let me create one more project so let's choose this one uh lurm ipsum some description provide project deadline and it's going to be completed okay okay this is the new project completed uh the deadline is correct everything is correct just like this we have implemented creating new project if we go inside we're going to see the project details description everything basically uh what errors do we have in the console those are related to images which we can fix the tasks table is empty and in this case you can just display a text that there are no tasks if the tasks data does not exist in the um tasks table you can you can easily do that now let's start working on updating the project details and deleting project let's go into project list and let's Implement delete first because this is always very easy to implement let's go in into project index and at the bottom we have this delete uh which actually redirects into um destroy not sure if this is called destroy but uh this is not going to work so if I click on this it opens project Details page yeah so we need to change this into maybe a regular button and whenever we click on this we're going to call the function delete project now let's create that const delete project that equals something so first let me ask the confirmation if uh window confirm are you sure you want to delete the project okay if this is false then we are going to return from here immediately okay uh however if this is true then we're going to proceed and I'm going to use rotor rotor delete and pass the root which will be project uh destroy I think this is called destroy destroy and we're going to pass the project ID as well we're going to see uh the project needs to be accepted right here project so let's check this delete project on click we're going to get an event then we're going to get um just call the delete project and we are going to pass the project let me save this and have a look so I click on delete now those um buttons are not next to each other which I'm going to fix text no RUP okay I'm going to click on delete it gives us the confirmation I'm going to click okay and something happened I think the request was sent just Beck and doesn't do anything right yeah the backend doesn't do anything so let's go on the project controller and find that destroy we are going to get the project uh Delete and then we're going to return to root um project. index and with message uh project was deleted okay cool now let's click on this click okay and we see project was deleted I'm going to click delete again and we see project was deleted again let's just output the project name as well which project was deleted so name equals project name and then right here let's use double quotes project name was deleted project test was deleted awesome cool cool cool now let's uh focus on the editing part so whenever I click on edit it should open the project edit page for this let's come right here and we are going to return inera uh project sledit and we are going to we going to pass project resource new project resource like this uh see my clone is missing here okay now let's go into project folder and I'm going to duplicate this create js6 and I'm going to call this edit jsx now what do we have so we're going to accept project here then I'm going to take this project and output project dot whatever is this project. name if that doesn't exist then we can take the empty string however we need image path as well image path will be project. image path or empty string okay um then write here we need the message edit project project. name good now let's have a look on the in the browser I'm going to click on edit here edit project project name too let's put this in the double quotes okay nice we have the information fied just I want to display the image as well I think I don't have I don't have a valid image so let's create new project test and some status click on submit uh now this has the valid image if I click on edit I should display this image right here so that the user knows what's the current image uh and then he can replace or she can replace if if they want so here we have this input for the image path but I'm going to display a div uh which I'm going to only display if the data dot in image path exists uh do I actually need this image path inside the data no I don't need I can simply access the Project image path so I can remove these part then right here if the Project image path exists we can output that div inside there we're going to have image uh project Dot image path it's going to be the source uh and I'm going to give it also let's give it class W 64 maximum okay this is this is it this is it uh let's give it um margin bottom or not top the bottom so this is the current image now whenever I'm editing the project I know that this is the current image and if going to if I'm going to replace it this is what's going to be replaced awesome let's go in the project controller and I'm going to update this update project request so we're going to return true from here and I'm going to actually copy this store project request rules and put this in the update project request as well we have name image description due date status let's import this rule eluminate validation Rule and yeah that's it so then in the project controller we get the project we get the request we get the project and on the project we're going to call update with request validated that's it and once this is done we can return to Road uh project. index and we can provide a message uh project let's use double quotes uh project whatever um project name was updated however we need to also handle the file uh the upload of the file so we can pass data here and in a very similar way we are doing um right here so we can get the image let me copy this part so here we get the image uh we can also change the updated by then we get the image uh we need to delete the previous um image on the file system if that exists so before I actually save this I'm going to check if the current project image path if that exists then I'm going to use storage helper storage facade um on disk public I'm going to delete Project image path so if that exists and then I am saving the new uploaded image into the public get the image path and update in the database that should work so let's have a look in the browser let's upload a different image uh before I do this let's check in the storage how many files do we have we have three files okay which one is this this is called 69 this is it so I I think I can delete this and this okay and now this needs to be deleted and the new one needs to be created so let's choose I'm going to choose this one I'm just changing the image um I'm just going to leave everything hit on submit project was created okay I think I missed something uh in the edit jsx on submit we are going to send the request on Project update and we're going to pass the pro project. ID yeah so we just created New Image which is fine new new uh project and let's check the storage now we have two folders right there okay anyway I'm going to update the first one let's update the image only and click on submit uh post method is not support okay I see uh we should not make post requests we should make put request and right here we need to take put as well okay good let's click close this and I'm going to hit on submit and now see project test was updated and if we check on the file system we see still two we still see two folders there was the image updated oh let me actually delete this one yeah whenever we are deleting the image we need to delete also its storage um related image path so if we go in the project controller I'm going to copy this part if we scroll down below before we delete that or maybe after we delete that we need to check if the Project image path exists we need to delete this as well so if I delete this one project test was deleted there is only one also in the storage there should be yep yeah the image was deleted there's empty folder and this is still available let me delete this one as well okay now this is also empty there are empty folders I think we should delete those empty folders as well um so I think we just need to delete d dear name of that teage path so it's going to delete the entire folder in this case I think um so I think I can manually delete this folder and not this but this okay good uh let's let's edit an existing project and add an image click on submit okay now we see this error project name is required the name field is required what just happened okay let's just hit the submit again name field is required status field is required we are sending put request okay I'm just curious what data are we sending so this is the update we are going to print all the data okay um it does not come here update project so it doesn't send anything right if it doesn't send anything then the validation is failing okay okay let's just print what is the data Json stringify what is the data we have the project name we have a status undefined project name stus description why do we get this name fied is required so in Google Chrome I don't see what request data is sent when the response comes with the redirect I don't see that so I'm I'm just going to check this in Firefox I open the Firefox and check this here as well and I discovered that um the file name is passed as well as the whole data like the status and the name everything is passed but for some reason I was still getting the name field is required and then I remembered that in um inertia or in LEL basically if you are doing a file upload with the put method you need to do it slightly differently okay so we have to provide right here under score method to be put you can't actually do file upload with an actual put method so you have to provide method put but you're going to still use post from the use form and post from here okay and now if I go in my Google Chrome and open an image and click on submit project um image 2 was updated and we see that the image is right here and we can check the storage as well there is only one um image at the moment and now I'm going to replace this this is the preview and I'm going to replace this with another image and I'm going to click on submit project uh name to was updated and right here we see um only one file the folder was remained which we can fix if we just go in the update and instead of deleting the image path we can use delete Del dear name of the image path that exists we're going to delete the entire entire folder and now if I if I delete that empty folder then there is one folder inside there there's the file so I'm just going to hit edit I'm going to replace this click on submit I see the replace thing image and on the file system I also see I see there are two images my bit uh right here I think we need to provide delete directory um delete is for the file we need delete directory and we need the same thing for destroy as well let me just let me just delete which one is the latest one this is the latest one this is not so let me delete the old one and this is the latest one which should be deleted and the new one should be created so I'm going to hit on edit upload something new click on submit it was updated and here we see also the new one updated one and just like this we have implemented deleting and updating our projects now let's start working on creating users and later we're going to implement assigning users to tasks as well and filtering tasks by a specific user let's open vs code and I'm going to give you now a quick tutorial how you can convert your existing crud type of application into another crud type of application very easily this is my Approach generally what I do so we have existing projects crud with table add new edit and delete everything is there okay so what I'm going to do is go under resources JS pages and project so I'm going to copy entire project folder and paste right here but I'm going to call this user okay then I'm going to search inside the user folder using control shift and H okay we're going to search for every uppercase uh the first letter uppercase project mentioning okay but we're going to uh filter that under specific path so we're going to do this inside this user folder not anywhere else I don't want to globally replace Place project with user but I want to do this only under resources slash JS SL Pages SL user okay this is the folder and as you see all the matchings right now will come from that folder so I'm going to search for every uppercase P project replace this with uppercase user okay let's go ahead and replace 25 currencies fine now let's find a lowercase project and replace it with um lowercase user okay let's do this replace then let's search for uppercase project and replace this with uppercase user we are not going to use that part but still I'm going to replace every project mentioning so I'm going to do this and now let me disable this case sensitive search and search for project project is not not mentioned in this resources JS Pages user folder anymore so our views uh are almost ready we just need to have a look and remove additional columns which we generally don't use okay let's scroll down below find the table section this is the table heading we don't obviously need all the columns so let's go ahead and fix them so this is the ID okay let's leave the ID we need the name we don't want status for the user uh maybe we want email so I'm just going to call this email uh created it when the user was added okay let's leave this created due date is something we don't want we can delete created by we can delete and actions we just need to leave okay let me do an overview the image also is not necessary so I can remove that okay so now we have the following columns um ID name email uh created it and action so we have one two three four and five total columns so this is the search section we're going to leave this search by name and email maybe so this the first one is for ID this one um is for the name so I'm just going to delete the one and leave empty for ID now this is for the name placeholder is actually usern name that's the correct one previously it was called project name but because we replaced that now this is called username okay here we have the status I'm going to call these um okay let's change this select input into text input this is going to be user email here we need email here and here we need email okay good then I think we need totally five columns so let me count that so this is one one 2 3 four five one is extra I can delete that now as for the TD itself we just need ID we don't need image I can delete that we need the usern name clicking on which it shows the user show page which I think we don't need so we can just display the user name without the link and yeah I think we can leave that no we don't need hover underline but we can leave this text Gray and text no wrap fine then we have this status area which I'm going to just replace with the project email then we have create dat we don't need due date uh we don't need created by and this is edit and delete section okay I think we have this main uh table ready now let's open project controller and I'm going to open user controller okay I think we need most of the things uh from the project controller so I'm going to start with the index so let me copy everything into user controller index but again we're going to search for all project mentioning uh let's search for uppercase P project replace that with user lowercase project replace with user okay we just need to import this user resource fine and the user model needs to be also imported which is imported by default okay so I think now this part is ready so we're sorting this by create date we have the uh name I think we need right here um email filtering by email so I I can delete this um because the status is by exact matching but we want um matching with like so I'm going to do like this user index query progam success okay everything is I think good now let's go and click on users okay probably we have some error we're going to quickly fix that so those are the broken images no problem let's clear these click on users okay there are no such exports in the constants which is good which is correct we need to completely remove that part select input we can remove this as well now we save this and click on users and we we are redirected to the users page okay this is good we have only one user at the moment now let's take care of the user create before I click on this button uh let me go into create user create and we're going to adjust this so we need we don't need image we need name we need email we need I think password password any we need password confirmation that's all what we need then let's scroll down below create new user that's the title okay fine then we have this image path is something we can delete then we have this username fine uh let's I want to duplicate that usern name but now I'm going to call this email so here we need email email email email email okay all these places needs to have email and here we need also email and we need password and password confirmation so let me delete this this is a text area can delete that this this is the due dat let make sure delete this as well this is the status I can delete this as well okay let's add two password Fields crl V this is the password and this is going to be the password confirmation let me collapse now all of them so this is name this is uh email now this is going to be password so let's just change this and into password this is the label and the below one we're going to have password confirmation so let's replace here and here password confirmation uh the type needs to be password and the placeholder needs to be confirm password okay fine then we have the submit and cancel buttons now let's click on this add new it doesn't work click add new okay I think we don't return that so let's go in the project controller uh let me collapse this and find this create I'm going to copy go into user controller and return user create okay save that reload click on add new and this is the create new user section we're going to provide the name email password and password confirmation the focus is on the last one which is something we need to remove so here is the is focus true I'm going to remove this from the password confirmation remove this from password and remove this from email as well so the focus needs to be on the name now let's Implement a saving of the user I'm going to copy that part from the project controller go into user controller and paste this and let's have a look we don't need image so I can completely remove this uh image related sections this as well image doesn't have created by and updated by I can remove this as well we're going to execute user create and then we're going to redirect into user index and user was created is going to be this access message and let's go into store user request and this is something we are going to work on so let's define rules we're going to have um the name to be required and string and now let's give it Max 255 uh then we have email required string and it not needs to be valid email and we're going to have password which needs to be required um and it needs to be password so we're going to use password validation rule for that and that is going to be um imported but uh does my vs code automatically going to import that no it does not import that automatically or here it is password okay so this is going to be the um illuminate validation rules password then we are going to execute the minimum length needs to be eight and it needs to have letters and it needs to have symbols as well just to make this a little bit complex okay uh let's remove that okay and it needs to be also confirmed so that the password confirmation needs to be there make sure that the password rule is imported and we have this store user request ready so whenever we save the user um it needs to be saved the only thing is that we need to encrypt the password so password needs to be bcrypt of data password like this so let's save this and have a look let's add new user John at example.com let's provide some password and click on submit okay um I think I made it typo in the confirmed it should be confirmed okay so when I hit this submit button it it's it's going to take some time until this is processed we can display loading indicator if we want based on the this processing right here we can accept the processing flag okay and the processing flag changes whether the form is in processing or not I'm not going to spend time on on this uh right now but the user was created we don't see this create date um for some reason does the user have create date let's check the database migrations for the user it has time stamps yes it has created it uh okay so I think we are using um I see so we are using the user resource uh and from here we don't return we don't return they created it I think what we need to do is to create a different resource so I'm just going to copy and paste this user resource but this is going to be for the user crud okay user crud resource or maybe we can call this user crowd resource like this and then we're going to use user Crow resource first of all we're going to return uh created it from this this created that um maybe we need to convert this into carbon new carbon created format okay good um that's fine then we can go into user controller and I am going to return the list of user crud resource user okay I think the class name needs to be user Crow Resource as well so let's go into user controller and user Crow resource needs to be imported however we don't need user resource anymore now this user cred resource will have created that as well so if we just reload we're going to see this created that so what about searching let's type zura it finds zoraa let's search for okay what do we return in the email let's search inside user crowd resource we return email what do we output in the index so this is search section email okay now we output the email and if I type John now it searches for the John so searching also works so now we have implemented create new user and searching for the user whenever we click on edit we are going to do this as well so I'm just going to open this edit and basically let me grab the form fields from the create uh we are also not using the select input and text area input from here so uh I prefer to remove them if I don't use so if I scroll down below this these are my Fields so I am going to copy them so these four fields and go inside edit and paste them so this is the by the way this is the pre- tag which we still output which we need to remove we're going to remove from Project as well so here so these are the fields the five Fields so I'm going to remove all of them and paste the fields which we have in the um create so now whenever we click on edit actually we need to return that from the controller as well so if we go in the uh user controller and if we go into project controller as well we need to take this edit and put this right here we're going to have user edit and this is going to be user CR Resource obviously we're going to pass right here user and user variable here as well so now if I click on edit it's going to open the user edit page however again if we go into edit uh we need to adjust this part so we need name we need email and that's it so I'm not going to so I'm just going to describe password password uh but it's going to be always empty string and I'm going to describe password uh confirmation as well but it's going to be also empty string uh the default values will only be provided for name and email okay if I save this and reload we should see this um name and email provided uh why don't we see them let's see data name okay let's print now what is the data Json stringify user undefined to okay yeah I see we need to open user Crow resource and we need to disable WP okay this is going to be public static WP needs to be false now if I reload we're going to see the name and email are provided I can try to update the name but we need to support the backand side as well let's go into edit and I'm going to remove this pre and I'm going to remove this pre from the project create or edit as well I don't remember where we had that we don't have in the project create I think we have in the project project edit great this is it we need to remove that okay nice now let's open project controller and we're going to find this update section I'm going to copy this part then open user controller and find that update section and paste it here okay so instead of project we're going to have user so let me search for all project mentionings and replace this with the user now perfect we don't need however the image section I can remove this uh remove that um we don't need this I can remove this as well uh however I need to check if the password exists so let me grab the password equals data data password okay uh if that doesn't exist we can take this as a as null however if we get the password then we're going to encrypt that so data password is encrypted um data password yeah we can just pass the password um right here however let me have a look um user was updated that's good if the password exists we're going to update the password okay however we need to also write this update user request part okay in this case I'm going to have a look at the store user request I think I missed something right here so we have this email required string and email but we also need to provide that this must be unique uh among users table and under uh under email column email okay but um yeah it should be like this inside the store user requests okay so let me copy this go into update user request in the authorize I'm going to return true let me paste this here uh we need this password but validation rule fine uh the password doesn't need to be required when we are updating okay however if it is provided it needs to be confirmed it needs to have this confirmation however in this case whenever the email is provided it needs to be unique among users email but basically we need to exclude the current user ID so I think we can do this by just providing right here uh this ID at this part okay so unique among users email column except that ID so I think that should work we can go now in the browser and just try to update the name hit and submit uh email has already been taken okay and password must field must be um string let's provide that the password can be null when when we are updating the user details password can actually be null uh however this is the part which we are going to check so let me go into L official documentation which I have opened right here so far I didn't need that much and I'm going to search for unique unique table column okay this is exactly how we want yep uh forcing the uni rule to ignore a given ID okay I think we can now use that this is exactly what we want so let me just take this out the the rule needs to be imported illuminate validation rule as for the ID I think we're going to have this ID required string we don't need string as well it needs to be um email and unique inside users but we're going to ignore that specific ID okay let's see let's see that so we're going to update this into John 2 so I'm going to hit on submit uh email has already been taken update user request we send the update right oops I think we are not just getting this ID properly so we're going to get the current user from the root so I'm going to execute uh this which refers to the request class okay and the request has uh root um and um the current root name is the user basically for the user uh resource so this is going to be the user we are trying to update and I think we can use this user ID but just to make sure that we don't make any more mistakes I'm going to dump what is that user uh let's click on submit uh okay this is the user exactly so and it has attributes yes okay so we are updating the join user so if I click on submit right now and not now conr okay aha yeah uh we are setting the password as empty string because that was sent from uh from the request anyway um and it was received as null so what we are going to do in the user controller is if the password exists we're going to set the password like this if the password doesn't exist we're going to unset data password completely remove that hit on submit now that's going to work and we have join two right here so if we are going to hit on edit and we can provide um new password click on submit the password should also be updated and if I try to log out and try to log in with the new password that works however pay attention that the email verification is not completed when we add the user like this okay we either need to send the ver uh the verification email to the user when his account is added or we have to automatically Mark the user as verified okay so in ideal case probably we're going to uh like when adding new user we shouldn't even create the password for that user so we should send an invitation to that user and that user clicks on the link opens that page and types his own password and then becomes authenticated on the website and registered as well but uh we're doing this in a simple way so we're providing the password and what we can do is just Mark the user as authenticated so we can easily add that um right here after the validation is done email verified at is the current time okay let's log out I'm going to log in with Zur let me try to add uh new user let's call this merry oops I'm going to hit on submit the M user was added and uh what about the email verification if we just log out and we just try to login with M user okay okay um I think email verified it that variable was was not uh that didn't work let me check the user if we have this email verified that in the fillable and I think we don't have and that was the reason so what we can do is set this email verified at sorry sorry sorry sorry I did this during update anyway it is not in this uh fill so it is not going to work email verify dat so either we need to provide this in the fillable or we have to do it in different way so in this case I'm going to add this in the fillable so we are doing this email verification slightly differently if we search inside entire project we're going to see that this comes from the uh profile controller from the a couple of other places like um up profile information uh and that happens email verification happens during um when the user clicks on the email right so it is it doesn't generally happen when the user is created that's why it is not inside the fillable so if we add this inside the fillable and then go into user controller uh let me cut this from here and put this right here when when we had the new user so in this case it's going to work so we'll log out let me log in with Zur go into users let's add second Zur if the enter user was ated and uh we can check this by Tinker as well so um let's see what do we have HP Artisan tinker and let's select user everything from the user okay we have several users this is sura which has email verified that now we have JN to which doesn't have email verified yet we have Mary doesn't have and the last users Z to it has email verified it so now Zora 2 will be able to properly authenticate with the email and the password what has been provided okay the only thing what I'm going to test is whenever the password is changed uh does the authentication still work so let's edit s our two and provide different password from what what I know click on submit the password was changed let's log out we need to log in with Zora 2 let's hit and login okay yeah password was definitely changed I can confirm that and the user zuro 2 was able to authenticate okay let me authenticate back with my main user and we're going to implement user delete part as well let's go into uh let's go into project controller and copy that part from the destroy now let's go into user controller and and and put this right here so now let's replace project with user uh we can delete this image path um we just execute user delete and then user uh yeah we just need to get the name and the user zura was deleted okay let's delete join user John to was deleted Mary user Mary was deleted okay perfect so I think we have implemented user crud now let's start working on the tasks crud and I'm going to do also um copy p in certain things but I'm going to start in this case with a bonite okay so we have this task controller and we are doing the following in the index but I think we don't have implemented anything else any other methods right so let me copy um from Project controller let's start with the index uh this is the create I'm going to copy uh let's put here uh we have the store project um I'm going to copy this part and put this here um we have a show which um do we actually need show for the tasks um I think we can display show or we can just use edit it's going to be always um always editing no I think we we need uh we need show okay let's just copy this show part and put this right here let's copy edit then I'm going to do this replace so this is update and we have destroy now let me search for Project replace this with the task not the user with the task let's search for uppercase project replace with uppercase task and is there any more projects mentioned no I think there's no project mentioned in the task controller which is fine so I think we have this um controller ready we just need several Imports like this Al class Al facade needs to be imported this Str Str needs to be imported as well this is illuminate support Str Str let's put this right here where else storage okay good now let's go into uh resources JS pages and project and we're are going to copy create into task we're going to copy edit into task and we're going to copy show into task okay now I'm going to do this Global search and replace and I'm going to do this under resources Jes um Pages uh task folder and I'm going to search for project and replace this with task but we're going to do this with MCH case so lowercase project replace with this with the uh lowercase task there are 50 results all of them are coming from resources JS Pages task a lot of results actually fine let's replace all of them and uh search for project with uppercase P replace with um uppercase t task and I'm going to search for also all uppercase project and replace this all uppercase task okay that is perfect now we save this and have a look in the browser I'm going to click on all tasks and we have uh the following error in tasks table undefined reading task task name okay I see the point Point task task name okay there was one case where the project was actually necessary in the tasks table so if we're going to open tasks table and find this task task name so that is the place where uh the project was updated and even the column was called hide project column so I think in this case we just need to revert that specific part hide hide project column let's replace that and that should be task. project. name now let's see okay so this is the global tasks uh table here we have the task name as well which is I think the column name let's use let's just replace this with project name okay okay good good good uh now let's add create new task button so we're going to do this under task index and we're going to put this right here let me open project index and copy this link that's going to go into task create and we're going to put this H2 and the link in its own div so we're going to have div with flex items Center justify between I think uh the link is not imported or what's the issue link is not imported yes link from inertias uh that link is not imported automatically so we have to do this manually now we don't see anys in the console we when we click on this add new it opens this task create page right now we have these columns for the uh for the project but we're going to easily adjust this I'm going to close everything because I have a two too many files so task create this is what I'm going to open then then we're going to adjust this so this is the path this is the task name we have the task description um task has its own deadline we have the task status uh and now let's add a few more Fields like we're going to have task priority so let me search for the status into several places um I think I have small mist take so I can call this priority T priority but in from the errors we just need priority not the task priority because the column is called priority okay so here and here we can call this priority and we're going to have low we're going to have medium and high and we need the proper values okay good uh What other fields do we have create tasks table okay we need this assigned user ID and we need project ID which needs to be dropped down so I'm going to duplicate this and paste it two times so the first one is going to be assigned user so let's call this assigned user uh in terms of the HTML 4 and the ID um is assigned user okay so here we need to iterate over the users the whole list of users and basically assign a task to it so we're going to do this so at the moment let me just leave um one option with um probably to do right there we're going to implement this select user uh right here we need to provide assigned um user ID that's that's correct uh and here we also need assigned user ID now and this is going to be the project or maybe we need to put this project um even at the at the top um task project ID so this is going to be the ID uh the name again needs to be assigned user already but I think we don't even need names I think we don't need names okay we're going to see um then um here we're going to have U project ID project ID select project ID and again we're going to render projects right here so I will just leave to do here now if I have a look we have task image name description deadline status priority assigned user and uh this is called task priority but that should be project and I think that the project should be at the top so I'm going to cut this and maybe we need to put this as a very first thing right here so first we're going to choose the project and we need margin top four here and not on the First Column first um T first we need to choose the project select Project image name description deadline status priority and assigned user okay I think we have everything now let's open task or uh store task requests now this is what we are going to implement with all the validation rules let me open store project request and copy things into store task request we need name image description due date status I'm going to duplicate the status and this is going to be priority and the rule values will be low will be medium and will be high comma here uh let's move this down otherwise it is not very readable and this rule needs to be imported okay what do we have um what else do we have I think we have a project ID this is going to be this is going to be required and it needs to be unique among objects among projects ID column not the unique but exists so it must exist in the Project's ID column uh if we check the validation rules we're going to search for exist rule exists yeah we can use this approach as well or where is that exist rule why does this here it is exists under table in the column exists that's correct and we need also assigned user ID which can be null assigned user ID nullable exist under users ID okay good now let's test this Let's test this let's go in the task controller let's provide um we have to choose the project and we don't have that okay we cannot test this unless we provide users and projects list right here so in this create or the task we're going to accept projects as an array and we are going to have uh we're going to have users as well um we're going to also accept users and we're going to pass this from the task controller let's open task controller and find uh create let's select projects uh project all basically and we are going to pass those projects [Music] under project resource collection of projects and we're going to pass users as well this is going to be user resource collection of [Music] users and let's get all the users as well let's import this project model and user model as well okay fine so now I have these projects and users passed but uh let me see what is the structure of these projects or users so let's just PR print projects okay it has data okay it is under data okay let's do like this I'm going to scroll down below find this uh project section here it is and I am going to iterate over projects. data and we're going to have each project and I am going to return uh option from here we are going to display project. name as for the value we are going to have project. ID the option needs to also have key which is going to be also project ID now here we see all the options and going to go in the task controller and also order by name so I want the projects to be sorted to make this um easily accessible uh why is the order bu not working order by name ascending what's that why cannot I call all on this okay so here I have all the projects I can choose the one we want uh we need to do the same thing for the users so I'm going to copy this part and this is right here paste this is going to be user and here we're going to have users data so we have two users at the moment and we can assign them okay perfect now let's choose some task image we are going to choose uh task name some description we can leave the deadline let's choose the status priority and I'm going to hit on submit okay we don't have the fields inside fillable so let's open migration create tasks table and I'm going to copy these fields and put them under task PHP inside fillable protected fillable uh this is what I'm going to do now let's resubmit assigned user ID null constraint failed is the assigned user ID it is not nullable I see so the task needs to have user it it is required and mandatory I see so let's just make this as required from the store task request let's not make it nullable and we're going to see the validation error uh let's provid it as required assigned user ID field is required let's choose something click on submit and I think the task was created let's sort the tasks by create data sending in the task controller created at descending okay it is sorted by created at descending was the new task created I have no idea uh okay I think we didn't create any task at least I don't see the just created task or here it is so I was looking at this uh okay here it to so the task was created however the image is broken and I think I know why the image probably was updated uh in the database was saved but we are returning it differently so I'm going to open this project resource and copy this part go in the task resource and put this right here so we need to use this storage URL to actually generate the URL for the task so I save this reload that and now I see that this task image is there every other image is obviously broken which logical but the task image is there this is so awesome uh let's go into uh create for the task and I am going to copy those fields and put them in the edit as well so these are all the fields and let's put in the task edit um callop things that here so I pasted them and we need these users and projects on edit as well so we're going to accept projects and users here so let's open task controller and find this create by the way maybe we need to sort the users by something as well like by name as well now let's take these both everything and put this in the edit as well uh we only need to return render this edit View and we need to pass the task here that's good that's good now let's click on edit and see what happens this is the task edit the details are not provided uh we need to open this edit and we need to adjust these fields okay what Fields do we have to edit we have the project ID so let's start with we need image I think we need name uh we need status description due date let's duplicate this few more times we need project ID uh we need a priority and we need assigned user ID do we need something else 1 2 3 four five six 78 1 two 3 four five 6 7 eight I think we have everything um however however the field is not populated and I think the reason must be in the task resource we need to disable wrap public static W equals false now if I reload this now you see that so we have this uh image we have uh the project is not automatically set we're going to see why but I think um most of the things are there the status and the priority in the user are not set and I think I know why uh because if we open edit for the task we don't actually set them uh right here like we need to provide um we need to provide value with data project ID if I provide that value then what happens okay it is not set uh what about default value let me print what is data project ID do we return project ID from the task resource now this is the question we return project but we don't return project ID that's the issue project ID this project ID okay now what now it was set and we see 25 here I think we need to do the same thing for assigned user ID now we don't see this because we need to provide still um that value default value or value I'm going to provide value let's see yes the project value is set let's remove that part so we're going to provide this value for all the drop downs which we uh missed uh previously so even for the task status we don't see the status it is not set so if I just provide right here data status then we see that this is bending if I provide this into priority then we see this is low and we provided uh right here it's going to be assigned user ID and we see Zur right here awesome let me try to update the image into something else and hit on submit okay we haven't implemented this um updating of the task from the uh res uh the request class um update task ask request this is it so we need to set this into true and we have to define the rules let's search for update project request and let me get everything this here maybe I need store task request and I need to get everything so I I'm just um curious if there is any difference between the uh project store request and project update request but I think there's not that big difference so I think we can simply copy this from the um store task request into update task request which gives us the following rules and if I hit on submit right now it seems like updated at least we see this updated image here let's click on edit and change the task name updated hit on submit and we see the task name updated okay this is great and the last thing is to implement uh Delete which I think is uh kind of implemented no it is not uh let's see task uh tasks table I think this is it and we have we have this um delete which we need to change into button so let's open project index and see that delete button which triggers the following function so on click we call this delete project on delete project we have the following which I'm going to copy let's call this in the tasks table delete task let's remove this hre we need to Define this delete task I'm going to paste this delete project and call this delete task so then here we're going to have task we're going to call task destroy we're going to pass task ID here and the message needs to be changed as well so now if I hit the delete it gives us some error uh but also the layout of these buttons uh takes no R this is what I'm going to give to the parent of this Tes no wrap okay I click on delete we see this error uh project is not defined okay project is not defined definitely it should be called task click on delete I show want to delete this task click okay and the task is gone the task is gone the message is not displayed because we don't have that part in the tasks table but if I just uh take this part if the access exists and um and then we display this however we're going to put this in the tasks table okay right here um we need to take that success and pass the into tasks table as a prop like this and we are going to do this from the uhp askk index we're going to accept this right here as well the success and we are going to pass this into tasks table that success uh variable and we're going to do this from Project show as well we are going to accept that success and we're going to pass this into task table now whenever I am deleting new task we see this not found okay let me click on delete click okay I think that was deleted however I still don't see this message okay what is this success now we need to print that success or can I always display that uh de no matter what's the success so here it is so I think the success was not pass properly let's go into project controller into index uh here we're taking the success and passing into the view I think we don't do the same thing in the task controller task controller index yes we don't do this now we do this and we need to do the same thing in the project controller uh project controller show here it is we need to take the success message and pass it into the view so that this success message then comes into project show we accept it as a prop right here then we pass it into the tasks table uh now let's go into tasks table [Music] and and remove this pre so now if I delete message here I'm going to see task was deleted in the same way if I add new task choose some project choose some image test test whatever so I'm going to quickly fill up this click on submit we're going to see task was created and here is the just created task now let's create task Details page whenever we click right here on this um sorry whenever we click right here on this task name it's going to open the task Details page without editing functionality okay that's going to give you the overview about the task in general so let's go into I think we already have that uh view actually ready so what we need to do is implement this link this is the project name and this is the task name let's scroll down below into t d in tbody and here is the task name and let's put this inside the um inside the link tag similar to how we have in the project SL index let's search for uh where is that this is it uh project show okay so we just need to give it um task show let's output task name and uh let's give the following classes into th this this is actually th so if I just change this into th and give the following classes task show and task ID so is this link available and imported not sure but we're going to see okay here we go uh I think we don't need no wrap because that is too much but whenever we click on the task it opens uh the task show page which for some reason does not work right now what's the URL task ID okay uh task tasks it doesn't have task tasks uh which is logical let's go into uh task controller and see that show and um yeah this is this is the thing so we're going to Simply render single task without anything so we copied this from the project show and from the project we were selecting tasks and we were filtering those tasks which we obviously don't need so we just need to take that task and pass it right here everything else can be removed everything else can be removed we need to do it like this so if I reload and click on the task itself uh this is we have some error I think okay what's that aha I see so we are using tasks table inside that task show task SL show so we need to adjust this this task table is something which is relevant for the project show but not for the task show we can remove that and now this is the detail this is the details page for single task we have task ID name status um we have everything uh except few fields which um is only relevant for the task but not for the project so we copied this from the project and we we didn't have that like similar to how we have this task status we need to have a priority so let me duplicate this and this is going to be priority um here and here as well priority and here we're going to have task priority class map or text map I think that needs to be imported if it is not imported okay now we have this priority and we also have uh assigned user information let's put this in the second column and we have the project details as well so let's duplicate this two times we're going to have project this is going to be task project uh name and we can also create link from here into project like this so we put task project name and in the H ref we're going to provide root project show task project ID and the link needs to be imported and this is going to be assigned user task assigned usern name okay uh the problem is that the link was not imported as it sometimes happens so we have to do this manually now we have everything we have um we have everything basically like created by updated by project and whenever we Mouse over on this project it it has csor pointer and when we click on this it goes into project Details page all the tasks of that project maybe we just need to add um let's actually remove unus things but maybe we just need to add the hover effect on this project like maybe we can edit this right here plus name on Hover underline like this but yeah this is the task Details page great now let's create uh my tasks page so uh right here in this header navigation I want to see all the tasks that are assigned to me so those are the tasks generally in which um I am going to work and every user is going to uh check mostly his own tasks her own tasks whenever they are going to work on this so in the navigation we're going to add this and we're going to filter this by the authenticated user let's start with the back end in the task controller on the back end side I'm going to create a new function call these um my tasks and we're going to filter the tasks by the assigned user ID so let me actually get everything from the index put this right here uh task cury we're going to get the current user which is going to be um out user okay and then after task cury I'm going to execute where a signed user ID um is the currently authenticated user ID filtering and everything we can leave it then we're passing this into task index that's fine um now let's open web.php to add new root for this uh root get task um my tasks and we're going to use task controller my tasks for this let's give it also name task my tasks now let's also open authenticated layout search for users duplicate this nav link and call this my tasks this is going to be task my tasks the root name will be this okay now here we have this my tasks whenever I click on this I get not found why do I get not found okay uh why do we get not found let's put slash right here task task my tasks okay what if I return something from here does this work no it doesn't work that is very strange um in the network we see that task my tasks return how is this possible is this handled by something else I I think yes I think we should put this yeah I know the reason I know the reason um basically our resource um controller okay I'm going to explain this um let's open this Artisan PHP Artisan Road Road list so here we have this and task and the actual task variable okay for the task show but we also have this task my task t s so the following route which is defined before task my tasks is catching this and it is trying to match the task model based on my tasks primary key which obviously does not work and that's why we have this uh issue if I put this before this task then it's going to work I'm pretty sure my tasks here we see one to three so if we go in the task controller right now remove this one to three and click on my tasks we're going to see uh all the tasks which is assigned to me so if I edit this specific one and change its assigned user ID into um zoraa 2 and then log in with Surah 2 what's the password yep um okay then whenever I hit on my tasks I see only one task uh this is broken and really weird shouldn't be um broken we can we can fix this um from the tasks table we need to find span and we need to give this uh text no no wrap they should not be broken okay now these are my tasks for the currently authenticated user and this is exactly what what I want so then I can work on the task I can edit the task and change its um status from uh in progress into complet it once I complete that and obviously it is um going to be changed however when we do the update we already directed into all tasks um not maybe ideal but not a big deal as well and we have this my tasks always there now I'm going to implement dashboard and I'm going to show you several key informations like the number of in progress tasks number of Penning tasks number of completed tasks and we're going to also show the latest um top let's say latest 10 tasks assigned to me on the day dashboard so whenever I open the dashboard I have an overview of those tasks what I need to actually do um okay so let's go into um I'm going to actually create new controller dashboard controller for this so I'm going to close every file and let's bring up the uh console and PHP artisan make controller dashboard controller let's hit the enter let's open the dashboard controller let's open web.php and we are going to change this function and use dashboard controller class index with a name dashboard okay now let's go into dashboard controller and create that function index and we can return the same thing uh and let's actually replace this with function inra dashboard um reload this and we're good now we're going to select couple of information like pending tasks and this is going to be number of pending tasks okay uh so task uh cury where uh status equals pending and we're going to call count so this is going to be um and I'm also interested um like more generic information how many pending tasks are there totally as well as um how many pending tasks are for me okay so we can display this um this both information right now so we can import first of all this task model so this is going to display how many total pending tasks are there total pending tasks okay and we're going to have also um how many my uh tasks are there uh in this case we're going to add extra wear where assigned user ID equals to user ID D let's create user which is going to be out user okay so total pending tasks and this is going to be my pending tasks and let's provide them uh maybe we can use compact total pending tasks my pending tasks now let's go in the dashboard jsx and we are going to create couple of cards like this is one card I'm going to duplicate this uh but I'm going to give also Flex in gap two so that we have these cards next to each other uh or maybe we can use greed and greed calls three so that we have three cards so this is going to be uh let's use H3 pending tasks let let's give it class um text Ember 600 point semibold okay let's reduce it 500 and maybe we need to also make this larger or even x large and then down below we are going to display um total total pending tasks this is going to be one number and we're going to have second number which is going to be my top s uh let's do like this I'm going to do my pending tasks SL total pending tasks uh but we're going to accept these two variables inside propes my pending tasks and total pending tasks okay let's open developer tools just in case we have some errors and we see those numbers great uh let's actually increase font size even more uh let's give this text Center no I don't like text Center um but let me create two spine elements for each number span let's give it margin right two then we have the Slash and the another span uh just like this let's give this also margin right too uh margin left to and I think we're going to increase its size as well take large uh margin top four as well that should be text extra large maybe okay not bad okay we have this uh one card and we need to duplicate this um few more times uh let's duplicate this we're going to have uh in program ress tasks which needs to have different color uh what do they do should be here like this in progress tasks and we are going to have completed tasks green completed tasks okay this is great now let's give the proper numbers from here I'm going to just duplicate these two times um we had pending tasks this is going to be in uh progress here we need in progress as well and then we're going to have completed let's change the variable names as well total progress tasks and my progress tasks total completed tasks and my completed tasks we're going to pass all this so one 2 3 and four we're going to pass all that into the view oops like this so we passed all of them we need to accept them into dashboard like this we have four variables and we're going to Output those four variables one here second here third here and fourth here now let's see uh okay so first I'm outputting total in there my progress and I need to do this vice versa my progress tasks and total progress tasks my completed tasks and total completed tasks and as you see those numbers are actually correct I only have one this is called incorrectly I only have one completed task nothing else I don't have anything else so if I go into all tasks open one pending task for example uh or maybe edit that pending task assign its user into zoraa 2 and click on submit then I go into dashboard we're going to see that I have one pending task here as well and I also want to display the latest um latest pending tasks um or latest pending or progress tasks uh which I need to Simply take care of so let's collapse these Dives uh I can just copy one and put this outside of this element oops not like this um I need this let me copy this part paste here so I need this Max with 7 Excel this is the um kind of container but I want to remove this grid and grid calls three because that was only for the uh these three cards and inside there I need this background white type of element and closing div so I'm going to put my content um right here here uh okay what do we have so we have another div inside there so let's put this de here and inside there I'm going to have H3 uh maybe I can copy some styles from this H3 but I only need probably this part is for the text color I'm going to provide a text Gray uh maybe 200 this is going to be my active tasks um and we need to give it margin top four my active tasks uh let's reduce the phone size a little bit and I am going to um display a normal regular table uh right here maybe not even a table but I only need like the task name and the deadline and nothing else maybe uh so let's just put a table anyway Tad TR th um so we're going to have ID name uh due date and may maybe that's it maybe the project name as well then we have this tbody uh and we need to iterate over these pending tasks so first of all we need to select those uh active tasks right now so active tasks we're going to use task cery uh where we are in we're going to use we are in the status needs to be either pending or in progress uh we are going to limit this on 10 and we're going to call get on this let's move this down make this more readable so these are active tasks and we need to pass these active tasks but uh first we need to process them through task resource collection we're going to pass active tasks then we can pass active tasks into the view so we accept those active tasks right here active tasks okay um then we are going to iterate so active tasks map or I think we need active tasks. data.map we're going to have task and we're going to return uh TR with several TD we need project ID sorry that should be task ID we need task. project. name and we need task dot um task name and task. due dat uh maybe we can display the status as well status whether it is it is pending um or in progress okay let's add key right here task ID and let's go into tasks table and I'm going to copy some of the classes like on TD we need this ping and margin uh sorry horizontal and vertical ping uh then on T head we need the following classes on table we need the following classes and we need some classes on th as well so let's see the dashboard is broken we don't see anything now here it is working and we see my active tasks project name task name status due date this is good uh the only thing is that we are going to contextually display this status now probably we don't even need the project name I don't know uh but from the tasks table let me get this this pan and put this here just make sure that these two constants are imported from the constants so here they are imported now we see them nicely on the homepage this should be my active tasks but actually we don't filter them we need also to provide um where assigned user ID so that part is important because we are selecting only my tasks so there is only one my pending task at the moment and this is this is correct and let's create link from the dashboard into project I'm going to use this link we're going to pass uh project. show uh task project. ID was the link imported yes that was imported now whenever I click on this project it's going to open the project Details page which is good uh we are going to give it uh I'm going to give it also text white font bold and on Hover text on Hover it should be simply underline maybe this font p is not necessary and we're going to do something similar for the task name display this link that's going to be task show and we need this te text white and underline we're going to pass the task ID here this opens a specific task page this opens the project page and whenever we open this specific task page I think we need to put this edit button right here as well so let's just open project SL show and where's that Ed button I think we don't have this edit button but we should have or the project uh no worries uh let's go into project slash index and we have this link so I'm going to copy this link let's go this into a project this is Project show I'm going to put this here we need both in a D le items sent items Center justify between and this is going to be project edit project ID this is going to be project view we have some error link is not defined let's import this inertias link and when we click on edit it's going to go into edit area and in the same way let's open task show and let's just copy this div and the link that link should go into task edit passing the task ID and we probably need to import this link or it is already imported let's go on the dashboard and click on this task and this is the task Details page and we have this possibility to click on edit and go to task editing page and change it status from pending into something else or changes priority and I think this is looking good uh and the go dashboard I'm going to do just some margin top three on the table which creates this distance between the title and and the project and this is good that's it for this video my friends and if you watch this till the end I hope you enjoyed it I hope you learned something out of it if you're here and still listening to me maybe if you are not yet subscribed hit the Subscribe button and like the video as well also let me know in the comment section what you like around the video what you didn't like maybe I missed something please let me know in the comment section down below thanks a lot for your time I appreciate it and see you in the next video

Channel: The Codeholic

Views: 48,056

Keywords: TheCodeholic, laravel, laravel project, laravel react, laravel tutorial, laravel 11, laravel 11 project, laravel 11 react, laravel react project, laravel react inertia, laravel project management, laravel react spa, laravel react full stack app, laravel full stack app, laravel 11 react full stack, laravel react full stack, laravel 11 + react, laravel + react full stack app

Id: VrQRa-afCAk

Length: 344min 19sec (20659 seconds)

Published: Mon Mar 25 2024