Activity Tracker | Blazor server project for beginners

in this tutorial we are going to make a basic Blazer server application and it will be called activity tracker so what we will do here we will basically track the activities what we have done in our daily Liv suppose I have worked on something today so I will add and refold that thing on a particular date and then we can track how many how many hours we have worked in a particular week or particular month or uh in a particular time frame so that's just a basic application which we are going to make with blazer server Blazer server and if you find this video helpful then please hit that like button make sure to subscribe this channel to get more videos like this before moving ahead let's take a quick look at the demo of this project so that you can know in advance what we are going to make so it is our activity tracker app and and we will track our daily activity how many hours we have worked or how many hours we have spent on some specific activities you can track those things and you can track the productivity hours of your life so here we have this thing activity tab now we have this login and sign up and we hav't implemented those things so it's just for the demonstration purpose so that we can demonstration the routing of Blazer server and here you can see that we have this form so here you can add any recort so let's just say I want to add something on date 17th of October and it's a four and here let's add worked on cop desktop app and learned uh let's say learn dictionary something like that in C and if we click on this here you can see that we have added this entry here uh here 17th one for hour and this this this we can also update this thing and let's remove this thing and you can see here it is is working fine we can also delete this record it is deleted successfully and here you can see we have total hours so if we filter this from 1 to 4 so you will see that we have filtered our record also we can also load all the records back and we have this reset functionality here so that's all the that's all about the app what we are going to build and I think it is necessary to you know in advance what you are going to build so that you can decide if you want to work on this tutorial or not so if you want to continue this tutorial so move ahead so let's start so let's create a database first so here press crn and it will open a new tab for us and here I have this pre-written script and do not worry about it I will provide this script to you guys so do not worry about this script so first of all we will create the database activity tracker and here our database has been created now after creating this database what we will do here is we'll just use this database now we will create this table so I'm going to copy this thing and now here we will create this table so we are inside our database activity tracker you can see here now here we have this table activity with ID primary ke and identity activity date date time not null total hours FL not null description and Vare 200 and it is a null Lael property you can also make it not null it's totally up to you so let's make it not null also so here that's it now click on this execute button and our table has been created after that we will create this stored procedure now we will create this is store procedure so copy this thing and here we will paste it so let me walk you through this stored procedure it's just a stored procedure for getting list of activities along with these filters start date and end date so these are parameters which we are providing is start date date time and ended date time and both both of these parameters are optional so that's why we have assigned null to them here we are checking if a start date is null or and date is null if anyone of this is null then we will select top seven records from activity table ordered by ID descending so the latest record will be on the top followed by the other records now now otherwise we will select all the activities where activities comes in this range between start date and end date so that's a simple stor procedure and we will execute this stored procedure oops okay now we are fine so we have created our stored procedure and this last query we will use it in our actual project we are not going to use it here and that's it for our stored procedure sorry SQL part so now right now we cannot see anything here but if we refresh it if we refresh it then we can see that we have this table activity tracker along with this table sorry it was database it is a table and here inside the programability you will see the stored procedure get activities so that is our database part now we will move to our project section and I'm going to disconnect it and I just want to show you it is our server name so you need to use this server name in our connection string so yeah that's it so let's close this thing now we'll create a new project I'm using visual studio code you can also use Visual Studio or J brains writer it's up to you but it steps will be a little bit different not much different uh actually if you are creating a project then you must be aware of your editor so that should not be a big problem here now we will create a new project so click here if you are using visual studio code and here you will see this icon uh this button create. net project why am I getting this button because I have installed uh devkit extension for cop so make sure to install this package this sorry not package extension make sure to install this extension it will be handy if you are developing a net application in vs code so when you will install it it will automatically install all the relate all the extension that you will need to develop in cop like this extension or here we here one one more yeah this extension and I guess there would be one more extension uh maybe so I guess that's it and so make sure to install this extension and now few people ask me which theme I am using so here I'm using this theme jellyfish theme and for icons I'm am using material theme that gives me nice icons okay so now we can create a new project so here I'm going to click on this button and it will take a while actually it is downloading few things so it will take a while so we have to wait a little okay I guess it's finished and now here you can see we have lot of options so I'm going to search here uh Blazer server so I have typed server Blazer server app Blazer server app empty I'm going to use the empty one because we will create our own design in this app so here click on the second option the empty app okay now we'll decide a location where we want to install it so I'm going to install it here in the project section in the net and select folder that's it okay now we will enter the name of project so I'm I'm going to name it Blazer activity tracker it will be our project press enter and it will take a little longer to create a new project so okay now our project has been created and here you can see that we have this folder and here we have our project so right now we do not have any solution Explorer here because it takes a time to generate a solution Explorer so it will be available in a while yeah so here you can see that now we have our solution Explorer and we can we can check it here it is our project and yeah so we have one project here so we will create one more project inside this solution so I'm going to click here in the plus icon new project and here we will create another project so it will take a while now it has appeared here and now we will create a class Library project so here we have two options the class Library razor class Library we will select this first option class Library so click on this and let's name it uh let's name it simply data access that's it or you can name it Blazer activity tracker. dat access whatever you want to do I just want to name it data access so press enter and press enter again default directory yes and it will take a little while yeah no it is created quickly so here we have this project class Library here we will have this class one. CS that we won't be needed so I am going to delete it and I have deleted it also okay so now we have our two projects so let's see how to run this application so here first of all let's see what's inside this thing here we have our application and here we will see that we have these pages and this ww root file here we have our CSS and here we have this app razor file and here we have have few ER and now they are gone suddenly I don't know what was happening here I guess it's a weird bug okay now we have again this red error so we will see it later why it is happening okay so first of all let's see what we got here now you can see that we have two options here solution Explorer and the default uh default Explorer of Visual Studio you can use anyone of it I'm going to use the other one the visible Studio One sorry the vs code Explorer because I am much more used to of this Explorer so I'm going to use it you can also use it you will get lots of options here like you can create a class with little bit of boiler plate or you have some options like when you click on add a new file you will see that you have multiple options of creating these files so you can follow it and I'm going to use this option and here we have uh properties and here we have launch setting. Json file and here you will see that we have these profiles so it is our sttp profile so our application will run on Local Host 5258 and it is our https profile so our application will run on https Local Host 712 so it is our https profile it is our I profile that is not useful here so we are not going to talk about it so you just need to be aware that our project will run on these two uh URLs it is our HTTP port and this one is our https application URL okay now let's run this uh project so press control shift p okay it will open a command pallet you can also find it here in the view and command pallet control shift p and let's type here net and here you will see lots of options so we are going to use uh let me think which one is it net project.net so it should be something like uh oops toet generate assets for build and debug I hope it is true and now it will generate uh files for us that we need to debug our code okay after that here in the section you will see this button and when we click on this button it will run our project okay now it is our project that is displaying in this URL Local Host 7102 and let's CL close it and after closing it we will stop it from here let's see how this hello world is getting displayed here so here we have uh we have this app. rer file and here you can see that here we have some errors so I don't know why these errors are displaying here but actually these are not error because our project is running absolutely fine so here we can see that we have this main layout and in the found section we have this main layout and here we have this not found section so it is our not found section so let's close this thing and let's go here main layout page so it is our main layout out page and here it is our default application that is running sorry default page and we should have one more page here so so this one is our main layout page it means whatever we Define here will be applied to every page so we will Define our layout here like like we will Define our header or footer here that will be common in all the pages so this main layout page will be used for that purpose and how it is defined it is defined here in the app. rer and here it is our default layout which is main layout now let's go here in the pages section and here you will see that we have two pages host and in index so if we click on this index page and here you will see that we have this uh this title hello world so that's why we are getting hello world in our default page it is the URL it means if we do not Define any URL so this page will be displayed and here you will see or it is a kind of index.html page here we have have everything defined so here we have our CSS CSS and here we have our uh JavaScript code and everything we need in our application have been defined here so yeah here this one is a error uh error UI which is defined here so if we need anything to link link like CSS or JavaScript we can Define these things here so let's close this thing and it is our index page we can run our project uh like just we have run earlier or we can also run it from here so let's right click here and let's click on opening new integrated terminal and here you will see that we have this terminal so oops we have to wait for it yeah now we are fine so what we will do here we will just type dot net run and it will run our project so if I type here net watch let's see what will happen so it will open our project in uh watch mode that will enable a h reload option that's nice thing when you are developing UI so here we have our project but right now it is not uh running in HTTPS so it is not that much secure but it certainly is running and if I change it to hello YouTube then let's see what will happen it will will yeah it has changed to the YouTube so now how to change it from 5258 to 7201 so right now let's close this guy and let's press contrl C here which will stop our server here and I have talked about this La setting. Json file and here you can see we have our order so first we have HTTP profile then we have https profile and it is just kind of weird hack so we will just cut this thing and we will paste it on the top Now by default this profile is going to run it means this URL is going to run our application so again let's type. netwatch and our project so now you can see our project is running in Port 7102 which is https port and we are fine here so let's close it for now because we do not need it anymore okay that's fine now what we will do here uh here we have this where it is app setting. Json file and here here we will Define our connection is string so I'm just going to type here connection is string and here it is the key of our connection string which is default and here we will Define server and name of server database equals to name of database Integrated Security equals to true and one more thing and Crypt equals to false okay so our server name was we will we will write it later our database was activity tracker I guess activity tracker it was our database and our server will be here so I'm going to check it actually it's uh I don't remember this name so so we have to wait so it is our server name I'm going to copy this guy and just going to paste it here oops what is happening here copy and paste here double slash and now we will be fine so here we have server data datase and server database Integrated Security true and crypt false okay so we are done now we have defined our connection is string okay now we will work on the database connectivity so right now we will install few packages so I'm going to right click on this data access folder and and here we will see open in integrated terminal so it will open it in the terminal so here we can see this data access directory so we will install these packages inside the data access directory make sure to change your directory to data access we do not install it to Blazer activity tracker we do not have to install it here we need to install these packages inside these data access so first package we will install in not install package uh D sorry net add package and the name of package will be Dapper so it is our first package that is going to be installed uh we will install two more packages after that so yeah again uh let's install another one microsoft. data do SQL client I'm not so sure about this package actually there might be some typos but I hope it is microsoft. data. SQL client if it is a wrong package then we will definitely reinstall it in the future okay net at package microsoft. data. SQL client it is useful for creating a connection is string another package we need to install so I have copied the name of this package Microsoft do extensions s extensions it is a plural configuration there is no s and abstractions here we have the S abstractions microsoft. extensions dot configuration do abstractions so this package is useful to access the data from App setting. Json file if you want to access anything from App setting. Json file then you need to install this package because our connection string is defined in app setting. Json file that's why we need to install this package now we have install all the packages that we need now what we will do here we will move here and here we will create a new file uh which will be uh let's see activity oops models it will be a folder and here act activity do CS it is it is our activity class now here let's say let's type cop class it is a snipet that I have been pre-installed not pre-installed I have created this s snippet by myself for the sake of saving time time okay so our name space will be name of project which will be data access dot models okay and here we will have our class name so our class is activity that's it we will have few properties so first one will be ID okay next one will [Music] be uh string oops a string and it will be description okay and another one will be date time activity date and the last one will be double and it will be total hours I hope these fields are right so here we have this activity uh activity tracker script we can see ID activity date let's copy these names right is activity date okay total hours okay another one will be description okay let's do one more thing just copy this thing and copy it here actually you do not have to follow this step it's just for you guys so I'm going to paste this script here so so let's create actually do not follow this step I'm just going to give this a script to you guys that's why I am creating a file let's name it activity. SQL and here I will paste the whole script and now you can find this script along with project so yeah okay just close this thing okay now here we have our file sorry our model class now we will Define some validation here so first validation will be this it is a required property this one is a required property too and it is also and here we will Define one more thing max length will be 200 100 that's it and here we will Define our range validator and our range will be 1 to 24 because our we have only 24 hours so I'm going to validate it okay now we have done our validation now let's close this thing and let's close this thing also okay now we will create uh one more file here inside the data access so let's click on new file it will be activity activity repos Tory and before that repositories okay let's click on this and here we have this file we create one more file here I activity repository. CS okay now we'll create our interface here so first we need to use data access do model now here it is our name space data access do repositories and now we will create our interface activity repository and here it is our first method which is ADD activity async which will take one parameter as an object of activity type and it will return activity another one is a delete activity sing and is a void type which will take one parameter ID another one is find activity by ID sing which will take uh ID as a parameter and it will it will return activity type okay so next thing will be our this one uh I enumerable activity get all activity I think and it will take two parameters uh first one will be start date and another one will be end date and both are optional parameter that's why I have Define uh null here and the last one will be a void type update activity as sync which will take uh object activity of type activity and actually this one should be a type of uh activity okay okay now we will create a new class here public oops first thing we will do here using uh what it was Data access. models now uh here name space name of name space will be data access do repositories and here we have this snippet okay name of class will be activity repository that's good okay now here we will do few things so first thing we will do here we will type c o r press Center and it will create uh what we call it Constructor it will create a Constructor for us here we will create a new readon private field which will be private read only ion figuration okay let's name it to config and get set sorry it should not be get set that will be enough it is a private field next thing we will create uh private read only is string connection is string and let's copy this guy here and just type here config equals to config and next one is connection is string equals to what should we name it uh config Dot get connection is string and default and now you might be wondering that why we have written here default because it is the key of our connection history which is defined here in the app setting. Json you can see here we have this key default that's why we have roote here default so that's how we can get our connection is string okay after that okay now we will Define this repository Define function in this repository so here we will write using system. dat using Dapper using data access. models and using microsoft. data. SQL client okay after that what we will do here we will Define this method public has Inc task which will return activity add activity async and this parameter activity of type activity and now here we will create a connection using idb connection which is from system. data connection equals to new SQL connection which is from microsoft. dat. SQL client and here we will Define our connection string okay now we will write our SQL query insert into activ acity activity date total hours description equals to at theate activity date at theate total hours at theate description now one more thing at last we will type select scope identity scope add theate identity which will return uh recently created ID okay now we will write here int created ID equals to await connection. execute scaler asnc int and here we will Define SQL and we will pass a new Anonymous object with these data make sure this data and this means these properties should be matched here activity date should be matched to activity date total hours should be matched to total hours description should be matched to description and and that's it and at last we will set activity. ID equals to created ID we will return activity so or create activity is completed now we will work on update activity public sing task update activity snc which will get one parameter activity activity and here we'll Define a just as we have done before now our query will be update Activity Set activity date equals to at theate activity date to hours description where ID equals to ID now here we will write a wait connection. execute asnc SQL SQL comma activity so we have passed the whole object here because this object contain all of these four field that's why I have passed this whole object here okay now we will Define delete activity s sync which will take one parameter ID here we will create a connection we will Define find a query delete it from activity where ID equals to ID await connection. execute s sync SQL and Anonymous object where we are passing ID okay now we will Define one more method here find activity by IDs sync and here we will Define our connection and here we have this uh SQL query select asri from activity where ID equals so ID activity equals to await connection. query first or default as sync which will return as an object and SQL and here we have pass a new Anonymous object and we will return activity the last method we are going to use get all activities Asing and it will take two optional parameters date time start date and end date now we will Define a connection is string here and with this query we can get all the uh data from activity table but but we are not going to use it we are going to use I store procedure which we have created earlier so here our activi is equals to await connection. query s sync which is a type of activity get activities in this I store procedure we have created earlier and it will take two parameters start date and end date and here we will Define a new Anonymous object where we will pass the uh parameter start date and end date this start date and start date end date and end date these thing and these thing should be matched to each other now we will return return activities okay so here we have defined 1 2 3 4 uh five all the five methods now here we can write I activity repository and we are done so here we can close it and now we can register it in our program.cs file so open the Blazer project here you will see the program.cs file and here you can register it Builder doservices do add transient and here we can just register it with I uh what it was I activity I activity okay it is not going to work now we need to go here in the solution Explorer that's why the shop extension the devkit extension is very useful so we can make use of it here right click on this Blazer activity tracker project and here you will see that add project reference click on data access now we have uh registered our project data Access Project to our Blazer server project okay now we can go here if you want you can go here or or you can just work with this solution Explorer okay now now here I can type activity repository and activity repository and that's fine and now we are done here in the program.cs section okay now open this folder here and here you will have this folder pages so if you are using the normal uh what it is normal Explorer then we will just create a file here with name but if you are using this solution Explorer then you have some extra pugs and the pugs like you can create uh razor file so I clicked on this add icon when I have clicked on this then then here we have these multiple options now you can choose razor uh component or page we have to choose a razor page and let's name it header then it will create oops I've got confused so I was wrong yeah we have to create razor component not razor page uh razor component okay it will be header and now we will have our header. Razer page now we will delete this header. CSH html. CS file because we do not need it okay so now we have our razor header. Razer file and I'm also going to delete it because I'm going to show you we can also do it it without this uh solution Explorer if you are not using it then it's fine uh we can also create just like a plain file here we will create a header. razor and we are good to go and here we will just have code section and about it we will Define our HTML or css whatever you want to Define here so so here we will Define our CSS and here we will Define our HTML okay now we will Define our links here so it is our header div or header uh element with class nav header which we will Define later here we have span class equals to brand and it is a brand name which is just a Blazer app and we will change it later if we want to change it okay now we have this UL with class nav here we have Li and here you can see this nav link so this element is provided by Blazer and it will manage the routing system of Blazer it means if you are in active link then it will automatically attach the class do active so we do not have to worry about it so here we have our nav link and in the hrf we are not going to Define anything because homepage is our root page which is index do uh index. rer page something like that so homepage is our index page now we will Define another link which is activity here HF equals to activity and we will Define this uh this page later now we will have another page here another Link login and we will Define this link later and and one more log after login we have this sign up so usually we do not use this nav link we usually use anchor tag but if we use this nav link then we will get some extra bugs like you do not have to worry which class is active right now you simply have to Define active active class CSS here so you simply have to Define that active class CSS and it will automatically append do active class here whichever link is active right now so we will Define CSS now okay so let's define it and here we have CSS for nav header display Flex height will be 60px align item Center justify and content space between background color is this and padding now we will Define the CSS 4 for brand yeah this one brand which is our Blazer app color will be white font size 25 PX font weight bold and nav display Flex Gap 25 nav lii display in line list style none and here we will have css4 navigation link and I'm providing uh this Pudo class deep which is uh which is a Blazer specific pseudo class so we will talk about it later why we are using it text decoration none font size 18 pixel color white and cursor pointer here we have this active clor equals to Yellow important and Al a h so it is uh CSS for hovering over any link okay so now we have defined our CSS so let's remove this deep from here just for a while and right now it won't effect on it so it won't create any problem navigation link uh yeah now let's run our applications so we are going to write here net watch and press enter so here we have our app and it does not have any header right now because we haven't called this header anywhere yet so here we will go to our layout main layout. Razer page and we will call this header here so header and press control dot that's it okay now we should be fine here so now you can see that we have our header so let's change from Blazer app to activity tracker okay so it is working absolutely fine but you can see that we have this awkward space around this navigation bar so we will tackle it from our let's see where we can find it we should have a globally style seat somewhere okay so here we have this site. CSS we can Define it here so I'm going to Define some CSS here uh P0 it means padding 0 m0 it means margin Zer and we should be fine right now okay so we are fine and we will work on some uh fonts here so I'm going to type here Google fonts and we will pick some fonts here okay so where are our fonts uh yeah just click on this guy after that do we have any selected fonts yeah we have selected it now I have removed it and I am going to select uh my kind of favorite font popins okay here we will have multiple options so we are going to select the regular one okay so we have our regular fonts and here we have these two options either we can use these links or we can just use this import option so obviously we're going to use this import option here so let's let's import these fonts here and after that you will see that we have this line so just copy this line and we will apply it to the whole application okay font family Poppins otherwise sensative if Poppins doesn't present uh for some reason we are not using internet or something like this for any reason if popins is not available then this Ander will work okay now we have uh some good fonts so here you can see we have active link home now activity log in something uh because we haven't defined any pce so we can see this error message here that's totally fine okay now we have done our initial setup now what we will do here we'll do some work so let's see how we can move this CSS to other page for that create a file with same name just like this one header. razor. cssh header. Riser do CSS and now we can copy these all of these CSS and just remove this guy from here and let's copy these things here so let's let see will it work or not so here we do not have any CSS yet because we have to do one setting here and that setting is we have to apply it to our index file so our root file is host where is our host host it should be here and host. cshtml okay so inside the host. cshtml file let's copy this line uh link href equals to blank and here relation equals to style seat and here we will Define our project name so our project name is Blazer activity tracker so copy this thing think and type style. CSS so I guess it is Styles not style styles. CSS so let's let's run this project again so I'm I'm little bit confused it was Styles or Styles we will find it later uh for that we have to reload our project so let's see what will happen okay now that was uh what it was Styles so our project name styles. CSS and it will create this CSS bundle and inside this bundle it will it will uh it will hold our CSS file for header. Razer page so let's close this oh right now we are not seeing any link here because few things are are not getting applied here that why we was using uh deep here so it was what it was deep I forgot about it so I guess it's deep so let's save this thing and it should be applied now okay so it is applied let's close this guy and and let's close this guy too okay so I'm going to stop my project here again okay that's good now what we will Define here we'll Define Pages for these links we'll create home and activity login sign up that's that's good and here we will Define our pages so first page will be let's see what it should be it should be login do raer okay just Define here code and let's write here H H2 login that's it one more page will be sign up signup do razor and here will be sign up and here we will Define the code section okay that's not big deal and now we will Define one more thing and we will create a folder because we will create lot of pages for this activity okay so here let's change it to activity let's name it to manage activity and here we will create a new page manage activity. razor and here we will write H2 H2 manage activity that's it at theate code okay okay and we forgot one thing here here we will Define the link so it will be activity activity so this activity is also defined here okay now we will Define these two also so so let's close this guy let's open the login. Riser page and on the top of it we will Define page equals to page will be login okay and oops why I am getting error here okay now we are F page login and after that sign up and here should be at theate page sign up okay so we will run our project we can also run it from here so I'm just going to run it from here okay so let's check it it is our activity it is login and it is sign up okay so our basic setup has been done and let's close this guy let's close it also and here we will Define few more pages for the future so let's let's create them right now okay so we will Define a new folder here let's name it UI or U Capital UI here we will Define our dumb components and manage activity will be our smart component here we will Define all the database activities and inside the UI we will create some components we will break our manage activities component into multiple components so manage activity will be our smart component here we will Define our all the database connectivity and here inside UI we will have the component that will handle only HTML or basic design so it won't these components want interact with the databases so our first component will be uh activity form so let's name it activity form. razor and let's define here that's it one more we will create one more activity list do razor and let's define code block here that's fine and one more thing the last component will be our filter dot Razer so here we will Define our filters okay so we will call these uh these components here and before that what should we do now okay now we will work on some design part so we are going to use boot strap in this project so just go here and type bootstrap 5 and click on this introduction link page and here we will have have these things so now here we have these links first we are going to copy this CSS and we are going to open host. cshtml here we will paste this link okay now we will paste our CSS sorry JavaScript also so copy this one this bundle one and and let's paste it here at the bottom okay now we are good so I hope it is working now so now we can work on our other Pages here we have this UI section so first of all we will work on this uh let's see let's work on this one first so let's remove this guy and let's type here div and class equals to row okay and here we will Define our colums so it will be div dot call [Music] MD let's say uh five five will be enough oops div. call MD 5 and I don't know why it is not working so I will just type like this okay and another row will be div dot call m d uh 7 again it's not working that's okay and call md7 and it should be call md5 okay so here what we will Define here will be our activity form okay so we will Define our activity form here and here we will Define our uh let's say activity list and filters so we will Define these things here so let's call our activity form what it was activity form okay so we will call this component here activity form and oops activity form so let's uh let's type here using using and our project name dot Pages dot manage activity and it should be like this I hope we should be fine now so let's see how it is looking let's run this project so I'm going to type here dotnet watch and we are going to run it in a watch mode okay so it is our project and here let's click here and there isn't showing anything so let's open this activity form page let's define something here uh let's just type activity form let's see what will happen so it will take a little while and now it should be reflected here if we have a call it so I think it is not working right now so now let's see what might be the problem so how we can find the problem the obvious thing is here look at this uh warning and found Mark element with unexpected name activity form if this is intended to be a component add uh using directive so it means we are not able to use it and here let's go here our manage activity is inside the I folder but we are just using here this thing so we have to add proper UI or proper directory path or name space whatever it is so here we can see we have now activity form displaying okay so now what we will do here uh we can just remove this guy and we can just do like this and I hope it will be okay okay now we will Define are form here so let's uh type here something div okay class equals to nothing we are not going to Define any class right now okay now what we will do here we'll do something let's see what we can do okay first of all let's delete this div dot uh mb3 margin bottom 3 and I wonder why it is not working like this okay here we will Define uh input type equals to text class equals to form control that's good and it should be input type equals to date okay okay so it will be our activity date and now we will Define here our label that I have forgot to add activity activity date okay and after that so it is our uh activity date and you can see here we have have this one okay so now we will Define some other fields so it will be total hours it will be input type text and another one will be description which is a text area and now we will Define a button which is a submit type with save text and a reset button with type equals to button so let's see how it will look okay so it is looking fine we will do one more thing here we will just wrap it up with something div okay class equals to p y we can do it somewhere else oops what I have done here so we will give it a padding py2 let's see how it is looking okay so no luck so far it's a px okay now we are good and I think rather than defining it here uh I should Define it here oops I don't don't know what I have done okay I think it is fine now so we will def we can also Define here like this uh let's give it padding from every side and now we are fine so we can give a little more padding from all the side and it is looking much better now okay so it is our manage activity activity form sorry and now it is good so let's define our table here so our table is this one activity list and here we will Define our table so first of all we will Define our table here so it class will be oops sorry so it should be like this and our class will be table table border T head inside T head we will Define our some headers First Column will be activity date second one is hours third one is description now we will have action column so we will Define it here we will Define our buttons uh buttons for edit and delete now we will Define our body so date we I am just entering some random data here it's actually not a data it's just a place folder date hours description and here we will Define our edit button and it will be our delete button so let's add uh Valu I'm using Windows 11 emojis let's type here pencil you can also use icons from font awesome I'm not going to use it just sake of the time just for the sake of time sorry for my bad English okay so here we will do it again and here we will have this dust bin or recycle bin icon it's a cart icon actually so I need to look for a bin icon so I'm going to S search here bin and it should be fine okay now here we will call this guy guy so let's call it uh activity list okay now here is not any error so you can see how it is looking yeah actually this green button is not looking that much great so I'm just going to change it from BTN info info will be good enough uh these icons are this icon actually pencil icon is looking good but this one is not looking that good uh actually it's okay so yeah what can we expect okay so we will call one more thing here and here which is filter so we call it here let's name it filter okay so after that let's open this guy and here let's just type something let's see is it working yeah it is working now we will Define our filter here so I'm going to type here div class equals to let's say P y1 I just want a little bit padding from up and down top and bottom that's it and here I am going to Define row it will be our row here we will Define two columns so div. call and call MD let's say six and here we will Define a button input type sorry not button input type equals to date class equals to form control and it will be our start date that's it and let's see four will be enough after that one more it will be uh end date and the last one will be a button so button type equals to button and class equals to BTN BTN primary and let's see do we have something like this search okay let's name it default default one will look much better okay it's looking ugly so let's see BTN what we get in secondary uh it's again looking ugly info info is looking yeah okay okay okay let's work on the uh form submit functionality so open this import section and here we will import this thing globally using uh data access dot models dot let's see models will be enough next thing we will import this okay and I think it should be good okay so here what we will Define uh uh inside the code section uh let's define here data access not data access activity activity okay and activity activity equals to new activity that should be fine uh activity filters do activity so yeah it is not working as expected so I'm just going to type here data access do model do activity okay actually it is taking activity from somewhere else that's why I am Define the proper name space okay now we we will put all this thing inside this edit form addit form press control dot okay now we should be fine so it is our form and here let's define model and we will bind it to activity activity and we will bind these feelds also so bind equals to activity activity dot uh date activity date okay and we will do same thing here it should be uh actually it shouldn't be like this actually I am doing it in the wrong place sorry guys sorry for that so let's remove this thing and this thing also and this thing also and this thing also and open form activity form and Define same thing here and put it inside the edit form press control dot okay and let's paste it here now we will Define the bind before that here we will pass model equals to activity okay so first of all let's stop this so I do not want to run it okay and we also have to Define at the rate here and after that we will bind our inputs to this activities properties okay but before that we need to Define this hidden field and we are binding this hidden field to activity. ID when we are saving our data uh we are creating a record then we do not need this field but we are managing edit and add on the same on the same form that's why we are using this hidden field here because when we are editing our record we need a ID otherwise if we are only handling the ad then we do not have to define it so in the case of saving the data means in the case of creating data it will be zero and when we are updating data then it will be 1 2 or whatever but it will have some value which will be greater than zero so in the case of update it will be greater than zero in the case of creation or create it will be zero now now we will bind our date property to activity date and total hours and after that the last one is description okay so let's see how we can Define uh on form submit method for that we have this on submit method and we will bind it to handle submit but right now we do not have any handle submit method meod so we will create one here it will be a void type and inside that we will just type here the console. right line so let's run our project for that I'm going to write here uh netw we can do that but I think I'm going to do I'm going to run it from here in case if we need to debug anything then we can easily debug with this debugger uh in the case of this net run or net watch command we cannot debug our code so if you need to debug our code then you need to run it from here so let's click here and after that we have these things so let's type something here and here and here so I have clicked on submit button and here you can see I have this value which we have locked here activity. description it means this thing is working very fine okay so after that what we will do here we will first of all we will stop this guy and now we will do two things first we will create a handle reset okay it should be reset and here we will reset our form and actually let's let's comment this thing and let's handle reset in the parent form so do not worry about the reset so now what we will do here we will we will validate our form so for validation purpose first of all we have to Define validation in model so we already have done that here we have defined our validation now we will Define our validation here okay now so first of all we need to Define this thing here and data annotations validator so it will enable our validation in this form do not forget to mention this uh element whatever it is I don't know what to say it I think it is element okay after that we will Define uh validation for each property so so here we will Define validation message class equals to text danger which is a bootstrap property and four and four we will call our method and inside that we will Define activity dot activity date okay and same thing will happen here but it will be replaced with total hours and here it will be replaced with description so it is our validation but one thing we have to change here rather than on submit we will use on valid submit now this method or sorry this form will be submitted only when we have a valid data so let's run this code and let's see so here you can see here we are are seeing any we are seeing all the validation message so here let's define any date okay after date let's see let's define it's to one okay if I Define it to 25 then again I'm seeing error okay so one would be fine and here description and and that's fine so it is working as we have expected so now what we will do here right now we are submitting our form here but we need to submit this form from our parent page so it is our parent page and it is our child page we will submit this handle submit method from our parent and this activity data will be passed from our parent so how we will do that so in the case of passing data from parent to child we will convert it to a property so it will be type here oops shortcut is not working here so let's type it manually public and data models activity activity let's paste this guy here okay and after that we'll Define get set okay and let's comment this guy actually let's delete this guy okay and about that we will type parameter and by typing parameter this activity will be passed from our parent page okay so that's the case of our activity so let's see how we can we can call this method from our parent for that we need some kind of mechanism so that we can invoke this method from our parent so we we have one class here which is called event callback so we will Define here event call back okay and before that we'll Define public and public event call back data access. models. activity it is a type of data which we want to pass to our parent so we want to pass an activity type of object so that's why we are defining this thing here okay after that let's see let's change it to on form submit or we can just call it form submit something like that yeah it will be let's change it to to valid form submit it will make more sense let's define get set here since we are accessing it from our parent so we need to Define this parameter here okay now with this property we can access our we can access our handle submit method but for that what we will do here let's remove this guy and here we will let's change it to async and void okay asnc void handle submit and a wait valid handle submit valid form submit do invoke as sync and here we will pass this data okay so that should be fine so that's how we can submit our data so we need to do one more thing here we have one more button which is called form reset and we do not have have to pass any data to the we do not have to pass any data to the parent so we cannot use this event call back method because it it asks us to pass some data but we do not have to pass any data so for that what we can do we can create just a simple accent delegate so here we will Define our delegate public action which is a delegate which do not return anything so it's action and let's name it to form reset get set okay and from here we will call this one form reset do invoke and from here we will call our actually not from here it is already calling from here handle submit okay so here in the child and we have done everything what we can do now we will move here to the parent end and here we will we'll do something so here let's see activity data access Dot models do activity activity equals to new data access do models do activity it is our activity and here we will Define void handle submit and here wide handle reset okay and here here we will just see activity and we will pass activity to it so that's how we can pass data from parent to child and we can call or invoke the method of child for that we will Define here form reset and form reset equals to handle reset and valid form submit equals to form handle submit and handle submit method will have have one parameter which is a type of activity activity oops activity okay it is saying that the name handle submit method does not exist in the current context handle submit handle submit now what it is saying okay so I guess we are fine and here should be like this okay so let's run our code but before that let's see what we can do here activity equals to new activity actually here what we can do we can do one thing and by default we can Sange activity date to date time do UTC now okay and we can copy this thing again and let's see activity equals to this thing so we are resetting our form like this and here we will simply type console dot right line activity dot let's say Activity dot activity date do TW string or two short dat string something like that we should have activity date dot I guess we do not have that method and here we will Define total hours after through that description let's see is it working or not so here we are going to run this code so when I click on this we can see we have this error so let's type F12 and let's see it is saying that cannot send data if connection is not connected State and here does not have a property match I think name activity so I guess I'm doing something terribly wrong let's see what I'm doing here and here actually I have a habit of using angular syntax that's why I'm Ming here here should not be any bracket it should be simply activity equals to activity form reset equals to form reset and and Vandal submit so that should be the case and after that let's see what we can do let's run this project again and let's see okay so we are here now we can see let's change it to three and change it to this click on save button and here oops not here here you can see we have logged these three values so if I click on this reset button it is not working and it's not working because uh we have actually we are calling the method of our child so that's how our state works so yeah actually I'm not able to explain it let me think about it since our activity model which is this one this one uh where it is here since this activity model is defined here in our parent and we are initializing it here in the parent then we are passing its value to our child page which is activity form now our reset method or reset method is called in activity form. rer page which is our child page so we are trying to reset this thing we are trying to change its value from our child so we cannot do directly like this so we have to call state has Chang method and we have to manually change the state so we will call this thing here state has changed state has changed that's it now it should work fine so let's hope it is working fine okay so let's go here and let's type something this this this and this and again it is not working so I hope why it is not working so let's see let's put uh break point here and let's see it is working or not so here you can see that we not able to invoke this method completely so here might be some issue so let's see let me see what is happening here so here is a mistake by my site actually it is at the on click and here it should be a method like this form reset. invoke and I hope we will be fine after that so let's try this reset method again and it is not working actually it is working I have put this break point here here let's remove this break point and it should be fine now so if I click on this guy let's change it to this this then this yeah we are final so it is our form submit that has been completed and actually we haven't connected it to database yet and we will do it at last first we will do every kind of UI activity then at last we will connect it to database so here we will let's type here too and save data to database and here one more thing that I want to show you that we can also move this thing to a separate file like we did in our CSS and for that what we will do we will create a new file inside this manage activity folder and it should be the similar as the manage activity it name should be matched to our Razer page so it will be manage activity. rager. CS so here you you can see we have created this so if I minimize this and I will go here this thing will be grouped so here we can see we have Pages manage activity and you can see now these two things have been grouped like these two things have been grouped but it won't be shown here it will be separated in uh normal solution Explorer and or normal file Explorer whatever it is so yeah now we can move every code from here let's copy this thing and let's delete this code section and let's paste all the things here okay now we have pasted these things but it will be defined inside the class so let's see she Shar class that's my snippet that I have created for myself and manage activity that's it let's see what is the project name activity tracker laser activity tracker dot Pages that's good and why I am getting error here already contain a definition for manage activity so what should I do so if we already have its definition then it means we have to Define it with a partial class so I hope it won't be mad now okay public partial class manage activity contains uh now it should not have any problem but yeah it is it is giving me problem so how can we fix it public partial class first of all let's comment these things Okay so so we are inside manage activity folder then I hope it would be good if I type here manage activity you can see that we are absolutely fine now let's uncomment these guys so yeah now here we have this one problem type name space this this do not found so we will type here data access. models. activity and now we should be fine okay and what if I want to inject something here so for that what we will do we'll just type here uh let's see uh I logger name of class manage activity logger get set and here we will just type inject and let's type here try cat exception open exception ex and here we can type logger do log error ex. message okay so here we are seeing this error I don't know it's actually error or not manage activity let's run this project and let's see what's happening and you can see everything is working as expected as we are expecting so let's type here and let's see here you can see we are logging these three values and here is our reset okay okay let's see let's do one more thing here let's change it to logger and logger do log message we should have something like this no we do not have this so we have this logger do log method okay let's let's change it to just type here logger do log debug and here we will type submitted let's see will it work in console or not it would work if we are using visual studio but it would work in vs code or not I'm not sure I'm just going to check it yeah it's not a necessary part for this project but yeah actually I'm doing it just for fun and one more thing here we are logging these things so these things will logged to console if you want to log it to file or database then you have to use some kind of logger like nlog SE log or log for net and you can find the videos for logging on an log or Ser log but you cannot find log foret in this channel what I want to say that if you want to log these things to files then you can check videos on this channel or whenever you want to check and you can use those things so these things will only log to the console so let's see let's just type here and three this thing and here we can see actually here is nothing is logging yeah and that's not be problem so logging is actually not the part of this course I just have attached it just for the fun I just want to show you how we can inject anything here so right now we are injecting our logger here and in future we will inject our repository just like this so now what we will do we have done form submission after that we will work on our this activ it list component so we will pass data to the activity list which will be a list of activities and we will pass some dummy list there and from there we will invoke two methods which is edit and delete so we will work on these things on upcoming upcoming uh upcoming part or if it is a single part then in the further part okay now we will work on activity list page so go here in the UI section and open the activity list. razor page and now we will work on it so first of all we will Define this activities property which will be uh parameter and we will get this data from our parent and and now here we have this on edit property and it is for invoking a method from the parent it means from parent we will invoke this on edit function and here we will have one more thing which is on delete and we will also invoke uh some method through this property now we have a handle delete function sorry handle edit and here we will actually in invoke this on edit so it is a handle edit method which we will call from here and it will invoke this thing that will be connected to our parent so basically we are passing data from child to our parent through this event call back now we will have this handle delete method me and here we will invoke this on delete property which will pass some data to our parent so if we want to pass any data to our parent then we have to use this event call back and if we want to get some data from our parent it means we want to pass data from parent to child then we just have to write here parameter then we are able to share that data but if we have to pass data backward it means from child to parent then we have to use this uh event call back so now let's do one thing here and let's delete this guy this guy this guy and let's define a loop here so we'll just type here at theate for each VAR item or VAR activity will be much or sensible in activities okay and let's close this block here and here we will Define things like oops not this activity dot ID not ID what it was date so activity do activity date do to string and DD mm y y y here is the format update actually is a Indian format date uh date month and year activity dot total hours and here we will Define one last thing activity do description that's it and here we will call those methods on click equals to on click oops on click equals to this handle edit and here we will pass the activity and let's copy this guy again and here we will paste this thing we will just change to handle delete activity so when we click on this button so what it will do it will call this handle edit method and this handle edit method will invoke this property and through it we can pass pass information to our parent so obviously we have defined this thing here then we also have to call them from here so first we will pass our activities and after that we have uh these methods so these properties let's see what was those oops here on edit and on delete so here we will also call them on edit and on delete so we will Define few methods here no here here so let's say we are okay not here here let's suppose we have some data I enumerable oops I en numerable activities equals to new enumerable activities oops this and let's copy this thing paste it here paste it here we cannot instantiate I numerable so it should be a list okay so here let's assume yeah actually we will fetch these things later but for now we are just passing some random data so yeah let's define some random data here new data access do models do activity and let's say Activity date equals to date time do UTC now total hours equals to 4 and description equals to working on C sh okay so now we have these activities and we can pass them here okay let's define method for these edit and on delete so we'll Define the methods here so here inside the manage activity. rager. CS page we'll Define our two methods first one will be handle edit and it will take a parameter of type data access. model. activity and its name is submitted activity and we will assign activity equals to submitted activity it means our form will be refilled with this data and here in handle edit we will just type console. right line and activity to delete ID deleted so now we will test these things so here let's run this application so now we are in our activity section and here we can see and it is not working so let's close this guy and let's see what is happening here and all of here is red actually here is not any error I don't know it's a bug of vs code so one thing I have missed here let's see yeah here I haven't passed any method so we have def find a method for this it is activity. razor. CS and here you can find the name of method so first one is handle edit okay and one more method handle delete so we are actually binding this method to our child method so handle edit will be binded to this on edit which we have defined in the child this is on edit and this is on delete and we are calling these things from here and we are assigning some methods to them and here we are passing a data so I guess it should be activity and I guess it should be Activity 2 at theate activity at the activities and let's see so I'm going to restart this uh editor I'm getting few errors here let's see we did resolve or not okay so I'm running the project again and let's see how it is looking so here we are again and again I'm seeing this data I don't know why I'm seeing the old data I didn't know why it is picking this thing and from where it is picking this thing data and DC because I have changed it here and it still picking the old data so that's certainly a problem here I don't know how to resolve it yet but I guess we are getting some problem from our vs code and you can see that the development with vs code is not quite perfect so yeah now I have closed it let's run it with command. net run let's see what will happen now so now I'm seeing the error with this command build failed at least I'm seeing the error and when I was using this to run the project I was not seeing even error so activity date I don't know why I am getting this error should it be like this activity date do twist string and and yeah I guess we are fine now let's run this thing again let's see what will happen and again I am getting the error and it is saying that this thing blah blah blah is being used by another process okay so that's very unusual error for me let's see how we can resolve it the only way to do it just close the visual studio code and I hope this error will go actually I had to restart my machine and then this problem get away so there was not a problem in a code except for this two string syntax otherwise everyone everything is fine in this code but somehow I'm getting the error so I have restarted my system and then I have opened the project again and I have run this project with net run and now I'm not seeing any error here and I'm also seeing uh latest data here which we have here so now we can test our things so if I click on this edit button you can see we have this thing here yeah and if I click on this delete button you can see Zero deleted okay so now we can see that everything is working as we have expected now we can stop this thing and we can close this thing too we will move further and let's see what we can do now so now we have done these U I think and one thing that has remained which is uh let me show you we haven't worked on this filter component yet but we will do it later so first of all let's see let's display some let's display some data and something like that or just add some data so now we will work on actual database activity from now so for that we will go here and we will write some code so now we will create uh inum here so let's create a folder helpers and here let's let's name it what should be an appropriate name uh helpers should be fine or maybe utility will be fine I don't know but let's work on the logic states do CS okay and here we will define public enum name of enum States and here we will Define let's say error error will be zero and completed then pending then error completed ending and here should be one more uh what it could be uh it should be none okay so error completed pending and then its value will be one it's two and none will be three so let's see it will be one and it will be two it will be three so and here we will Define a name space so name space if you are using visual studio then this name space will be created automatically so here we will have a name space let's see Blazer activity tracker it is a name of our project and helpers that's it so now again you can see that here we are seeing the error and here now we are fine and now we don't have any error okay now here inside the pages we will create one more folder and it will be shared and inside the shared we will create few pages uh like here we will create a spinner and here we will Define a bootstrap spinner that's it and we will create one more thing alert. razor here we will Define our razor page and here we will Define one more thing alert. rager. Cs and here we will Define some uh what we say we will Define some logic okay and actually it should not be a CS it should be a CSS so here we will Define our CSS not logic okay pardon me for that now let's work on this spinner do Reg page [Music] and oops from where it has come okay so now we will Define this div okay which have the class spinner Border X and it is a booty strap class you can easily go here uh boot strap five and here you can find the spinner so if I search here a spinner so you can see that we have this spinner class equals to spinner border which we have defined here and we will def remove this x spinner border is the class not X and here you can see rule equals to its status so from here I have copied this code and here you can see this loading thing which we will Define now and here we will Define one more CSS class so class is for the color of border so you can see that we have multiple color loader we will pass the CSS class from parent that suppose if I want this blue color loader then I will plus sorry then I will will pass the text primary class if I need this color then I will pass this one if I need this yellow one then I will pass text warning otherwise I will pass info or I can also pass text Doc if I need this thing this black color loader so I will pass this thing from my parent so here this code and here CSS class is a property and by default it have text warning it means if I do not pass anything then it's class its value will be text warning so here we can see text warning is this yellow one so by default our spinner will be a yellow color spinner so I have created this shared module so that we can use this thing easily in uh whole project so whever I need a spinner and I will call this component and I will pass this value and we are done we can use this spinner from anywhere in our project now we will work on this reler do RoR page so here it is a same uh boot strap thing if we can go here so here you can see that we have this these alert boxes but we will will Define some uh we will Define some logic uh logic will be like this after uh one or two seconds these things will automatically fade away since we cannot use directly JavaScript here so we will use some CSS and we will do some weird kind of Hax so we will do that here but here we can see that we are just using these buddhy strap classes alert alert primary so we are just defining alert here and the second class we will pass from parent so if we want a red color a danger kind of alert box then we will just pass alert Danger from our parents so our class will be alert and this CSS class will be alert danger which will be passed from the parent and here we will Define message which we will Define here so this message will be retrieved from the parent and now another property CSS class which is a string type and we will pass the CSS class from parent 2 okay and now we will Define that weird hack to do Fade Out so here we will have this on initialized as think so it is a kind of Constructor so this block will be the first block that will execute on this page so whenever we load this hel. rer page the first thing will executed this on initialized sing so this method will be called when our component is initialized and here we will just call this this await task. delay 1,000 so when this page or sorry it's not a page when this component is loaded initially it will be delayed for 1 second okay and after 1 second we will append this class fade out to our CSS class so so basically what we are doing after 1 second we are appending this paid out class to this element and we will Define this CSS here so it is a CSS 4 Fade Out opacity one animation Fade Out 1 s 1 second isas in out forward we will Define animation for this fade out here so in 0% opacity will be 1 and in 100% opacity will be zero and display will be none that's it and we can close these things now because we do not need them so first of all we will inject our activity repository here so we will use this keyboard inject that we have used earlier here and now here we will Define a property of type I activity repository so it will be private I activity repository activity repose get set so it is our uh property now we will work on this handle submit method so we will save our data to the database so let's delete this guy and this guy and this guy and now we will Define our functionality here so here we will Define some functionality to add or update or record we will Define both functionality here on the basis of if condition and here first of all we will set or state to pending so whenever user click on submit button our state will be set to pending and we will get a loader or something like that yeah we will display a spinner there while condition or state is pending and after that we will check if activity date exist or not why we are doing this because we want to check whether uh activity date is exist on database or not means we can only enter a single entry for a particular date so for example for for today you cannot do two entries in database so yeah so that's how I have designed this database I do not want to make two entries for a single day and you can change it if you want yeah uh so that's not a big case but when you will create reports so you have to do a little bit change in the logic okay so now we will check if activity repository contains uh sorry not activity repository we have to check if uh date exist in database or not it means if uh record with this date exist in databit or not so we have created this method for that and if activity date exists then what we will do here we will set state to error and we will Define a message here activity date already exists please select a different one otherwise we will move to the else condition and here we will check activity ID equals to zero what does it means so when you will do a fresh entry it means you are adding a record to database then our activity ID will be zero if you are updating a record then our activity ID will be greater than zero so here inside this if block we will add record to database so here we have called this method add activity s sync activity and activities do add activity so here we are updating entry to the database and here we are updating our local state which we have defined here uh uh it should be somewhere here yeah this one is here so we are also adding this entry to our activity uh list so we are managing both our local state and state of database we are managing both things here now here else we will update our records and we will set message equals to save successfully and our state will be now changed to completed and here we will call handle form reset it means our form will be reset after that now we will do some error handling here log message and set message to error has occurred and we will change the state to error okay now we are done here and our handle submit method that is being called here activity form and here so this method will be called on form submit so let's run our project okay so here let's write do net run and now I'm seeing this error Pages alert. rager. CSS was defined blah blah blah so yeah I have done some mistake here probably in the UI no here okay so these names are mismatch a l e r t and a l e r e t so let's change this thing let's correct this okay so our CSS file and our component file name should be same it is alert capital a l e r t it should be Capital l. rager. CSS so these two names should be same okay now now let's try to run this code net run and again here I'm seeing these yeah I don't know why these are are happening here I don't know is Blazer is that much buggy or error is in my code or these things happens in VSS code because I do not use vs code too much I don't know but here let's see what it is saying it's probably in my code building and here here we will see that the type name is space name I activity repository could not be found uh blah blah okay so it would be nice if it gives some error before the compile time but it was not showing any kind of error before recompiling the code now it is showing the error so yeah that's that's not a good thing I think Microsoft should have done some work on that thing or it might be a problem only in my editor so I'm not sure that it's a globally problem Global problem or just mine okay okay okay okay so let's see why we are getting this error is saying that it does not exist here yeah okay it does not exist here that's that's fine because we haven't defined any anything here so we have to use we have to call its name space here and it should be somewhere uh data access dot repositories and now it should be fine again uh I'm getting the error so I guess I have to type here data access no not data access uh what is this project Blazer activity tracker okay do helpers and state does not exist in the current okay I thought I had to Define helpers because we are using these enumerables here so let's commment it for now and let's define this state here okay so we will Define our state somewhere here you can Define it anywhere so let's define it so we will Define the state here it should be integer type in state equals to States dot none and we will convert it to int oops int okay so here you can see it has automatically added this line here okay now we have to Define this message here too so here string message equals to this okay now we are getting few errors like this this this this this okay we have defined our state and message here so there shouldn't be any problem now what it is saying a weight operator can only be used within a sync method okay so let's change it to I sync void handle submit okay and is activity date exists so we will check that thing I guess I haven't Define it now so let's find it our repository activity repository and yeah find activity by ID let's search this thing is activity data exist I I think I have to go here I activity repository and I will easily find there so yeah we do not have this method it is activity date exist okay so we will Define it now that's not be the case and we already have a SQL for that I have defined it here so we can check we can use this query for that select to one ID from activity where convert this this this convert date first we will convert our date and then we will check that date which we are getting from the client and ID does not equals to ID it means we also have to check that we are adding record or updating record okay so now we will write that method now here in the activity repository. CS class we will write the method so it will be public assing task Bool is activity date exist and here we will pass to parameters date time activity date and in ID we are just using the pretty much the same thing which we have done here we are creating a connection here and here is our query that I have talked about earlier select opon ID from activity where this date equals to the date which we are getting from our parameter and ID does not equals to ID here activity ID equals to await connection do query first or default snc here we will pass SQL and now here we will pass our Anonymous object with these two op these two Fields activity date and ID okay so at last we will check ID activity ID is greater than zero and we will return that thing so if activity date is exist then it will be true otherwise it will be false and let's define this thing here also okay and semicolon that's good and now is fine but it is saying something activity date cannot convert system. date time to system do date time yeah it is a problem of nullability so let's go here it is activate yeah this thing is non-nullable and this thing is nullable now let's open the activity oops not contrl f it should be control P activity. Cs and here we have this thing and now it is non nullable that's good and now error is gone okay so we are good so far now this thing is creating a problem generate state has changed and one problem is here handle form reset it is also giving a problem it is handle reset okay and it should be state has oops I guess we are missing something here to so what should be here state has changed okay so behind the scene I have searched it in the Google and here we have the definition of state has changed and it is available from 3 to 8 okay and its name space is microsoft. aspnetcore do components so we can write right here using this and I think it should not be a problem now uh again it is giving a problem so what should be uh problem using soft dot let's use it here and here you can see that it does not have a dark color means we are not using the name space and actually okay so we are already using this name space so that should not be the case it should be a different case the name state has changed does not exist in current context okay so I am stuck here in this problem and that's bad okay so let it be like a as it is maybe it is not a problem maybe it is showing unnecessary error but it is the error here so yeah I numerable does not actually contain a add method so it is a read only one so we have to change it to list and now we should be fine here and we have only this error and let's see let's see oops let's run here tool C let's clear this thing and Dot net build let's see do we have an error or not and we have some error here I don't know here UI activity list. Razer and UI activity list do razor and it is saying the error is in date time thing so where is it uh operator question mark cannot be applied to oper of type dat time projects. net Blazer activity tracker and Blazer activity tracker. CSR okay activity list. razor 1436 here is 14 uh okay so we have changed our nullable date time to non nullable now we do not need a question mark here okay so let's uh let's build this project again so going to open the terminal again here and let's run the net build command and let's see do we have any error now or not okay now we do not have any error and it is showing unnecessarily error message here is saying that that blah blah so I don't know it is a bug in Blazer or bug in vs code I do not know about it and it's uh quite an annoying net watch run or net let's try this one net run okay finally we have run our project successfully so we will open this project here and okay now we have this activity page and let's try to add it for this date let's type 4 hours and let's say beder server let's type here save and everything is working fine it has added here okay and it should be added to database now we will work on some UI stuff now okay so now open your activity do manage activity. rer page and here in this call md5 section we will check if state is pending then we will call this spinner component and if a state is error and message length is greater than zero then we will call this allert component and we will pass our message and CSS class to alert danger okay and if state is completed and message length is greater than zero and we will again call this alert component and we will pass a message and and a CSS class with alert success and here let's remove this guy and let's call this thing so it will add this line here uh this line actually and now let's let see where we have defined it we have defined at do Reger here in the shared section and we already have called this thing here and we can import this thing globally so we can use imports. Razer page and if we Define it here then we do not have to Define in every component so here we can use this thing globally okay so now we are we're looking good so let's run this thing C and Dot net watch run let's see what will happen here uh I hope we do not have any error it's seeing lot of it is displaying lot of error here at this this is a red one this is red one this is red one this is red one and it is indicating that I have error everywhere in my project and that's not the case that I have some problem yeah it is I don't know what should I say to it it is saying waiting for a file to change before re before okay so we have this error here it's not a fake one this time it is saying that see the name state does not exist in the current context let's see uh states does not exist in the current context okay so this states does not exist in the current context so actually what I want to say that if if it is error then it should show some error here like it is showing here the error warning this yellow underline it should show some yellow underline or red underline here but it is not showing anything here and that thing I do not like about this okay so actually what we can do about it I hope this thing will be resolved with uh version 8 blaz or8 okay so it is saying that this states does not exist here so we need to import it and let's see where we have defined it we have defined it inside the helpers so let's define it inside the input section okay and let's define here using Blazer activity tracker do help first so let's see do we have any errors now and so it has started automatically let's close this one okay and now we will move here to the activity section and let's add one one more thing for date 23 5 description a b c d let's save it and you can see everything working absolutely fine so let's try to add one more detail for date 24 let's add this and this and it should give some kind of error message here that I am not seeing and here we do not have an error again so yeah we will we will see what is happening here actually this thing is constantly moving and it is not showing any error so what should we do now okay let's let's test this thing later and let's see here let's click on this okay we can't update it right now so what should we do now actually one thing we can do here we can debug the code so for that we have to stop this and we need to run it from here okay and we can put break point here okay and here let's do an entry for the 24 4 AB BC let's see try state is pending and this one is true it exists so here is state state do error message this activity date already exists please select different one and okay and here nothing is getting changed we do not have displaying any error message so problem might be here okay so if we are moving here states. error and here if state is spending then is Spinner and state is this uh error say is in complete so now we should be in uh error is State let's check it again so let's go here and go here here it already exists now State equals to states. error okay and state do message this activity date already exists and this [Music] one then we are exited from here and no progress at all so can we display can we display it states do pending can we do it let's run this thing again no yeah let's remove this thing and let's do this thing state state yeah this one let's see what is happening here so let's run this project again and let's open the states. Cs page so 0 1 2 3 none is three so here we have this error okay and let's add this rort again so okay okay okay actually I have run it so many times now we can say that we have our state equals to 2 let's run this thing again and let's check it again here full this and if we go here okay and now it has two state two so where is this okay pendy so yeah uh it should be one but somehow it is not changing the estate and that is the problem problem so so we will actually let's work on this thing later uh okay let's work on this thing later first let's display some records so we can display the records here let's close this thing and this thing activity repository High activity repository and let's let's work on the displaying records okay so now we would like to inject a thing here it should be like inject by JS runtime JS runtime and that should be fine and after that we will work on the loading method okay so now we will Define this method here load activities and it will take two parameter start date and end date both are optional we will also apply filtering here and here inside the triy block first we will set his state to pending now we will check if it start date and ended both are not null it means we have to filter our record so we will call this await activity repos do get all as sync activities get all activities as sync method and we will pass these two parameters otherwise we will not pass these two parameters that's the that's the simple case and now here we will set we will change our state to complete it and now we will log a message and a message set a message oops okay and here should be one more thing that I'm missing it should be error now our state should be b error after that okay so that should be a good thing and here we will remove this thing so by default it will be empty okay and now we we will have a method here on initialized actually we should not Define it here let's define here okay so let's define here on initialized actually why is not working protected override I think uh on initialized it should should it be protected override as Sy task uh on initialized has sync wait load activities and what it is saying no suitable method found to overwrite manage activity Doon initialized I think uh I don't know what the hell is happening here he saying that this method that does not exist so how do I believe it how can I believe it do net build let's see so I do not believe in myself how buggy this thing yeah here you can see that here is clearly displaying an error and here you can see nine warning and zero errors okay oh okay okay okay so it's okay what we can do so what we have done here we have this uh life cycle method so this method is called when our component is initiated so it is the first method that is going to be called so when our component get initialized we will load our activity so we will call this method and we have defined this method here so we will call this method and by default it does not have any parameters so we will go here in the else condition and we will set activities equals to whatever we get from our repository so whatever we get from our repository we will assign it to activities then this activity is get loaded and after that we will pass that activity list to our activity list component here and the activity list component will display all these items so that is the logic here so let's let's run this code again and let's see what will happen net run and let's wait for it so let's minimize this thing and let's go here and let's close this thing and let's see yeah now it has run so here we can see that now we have to record so let's click on this thing and let's try it to this and this so saved successfully and it has this one displaying here okay so we will remove it later it is a reminder that we have some error in our code okay okay now we can see that we have updated our code success y if we refresh this thing then you can see the changes are persistent okay let's let's add one more record and let's see let's uh eight and let's say RND D [Music] on.net cop let's click on this saved successfully and you can see instantly we have have added this thing here okay so we have done our add and edit but add have some error and now we can work on either on delete or either on this thing so let's work on delete first so let's work on the delete method here and where it is okay so this one okay so first of all we will delete this line okay okay so now let's work on this thing so first we will Define a TR catch block here and we will set our state to pending and after that what we will do we will check if or if we want to delete or not so we will invoke windows. confirm method and windows. confirm method cannot be invoked directly from our cop code so that's why we were using using here this we were injecting this IGS runtime so that we can use some JavaScript inside or C code and here we can invoke we can use this invoke Asing method and we will use uh other thing the other half like the JavaScript code so here we have defined our method which is confirm windows. confirm and here it is our message how you show to delete if result okay if result is true then we will set message equals to deleted successfully and we will call delete Asing delete activity Asing method and we will pass this data okay and at last we will also remove it from our local state so that is a list so we will also remove it from a local state and here we will set our state to complete it after that we will do some error handling here so we will log our error set message equals to this and set our state equals to states. error and let's run this code again uh dot net run okay now we have run our project and we will click on this you can see we have now this popup message it is asking that do you want to delete or not and actually it has I wonder why it is cancel when I have clicked on cancel it has activated this state okay so that is one bug here so let's try to delete this record from date 24 and it has deleted successfully okay now we can we can refresh this page and you can see we don't have any record it may it also have deleted from database and yeah I know where problem could be first let's stop this thing and let's set this state uh inside here okay so when user say yes I want to delete then we will say pending wait otherwise otherwise everything is fine so we can test it again and let's run this guy again let's wait for for a while okay now we are good here and now we are also good here so let's see I clicked on this cancel and everything is fine so let's delete this thing and and delete this thing okay now let's add few entries here so let's add 422 no let's add 4 uh one and at this day I have worked 12 hours and done some coding stuff okay after that Let's uh do this entry let's add here and worked [Music] on.net cop that's it and 11 10 and after that 22 6 hour and worked on JavaScript okay and 22 after that 23 here 3 hours 4 hours worked on let's say oh worked on YouTube tutorial 21 2 3 4 okay and after that uh 23 24 angular doet YouTube tutorial that's it 21 2 3 4 5 records 22 let's work on 21 2 hours wrote an article 20 let's see on two of October let's say I have worked 4 hours on angular and. net core and uh third of October let's do one more entry and done some research on AI 1 2 3 4 5 6 7 8 and here you can see that we are displaying eight records but if we go here in a repository section we go here and if we see actually actually we cannot see it here uh let's see where is our SQL file so if we go here in the stored procedure you can see that by default we are fetching seven records from the database but we can see that by default we are getting H records and whatever we add they will be added here so we haven't uh done any we haven't put any condition on the client side and that's totally okay uh that's not be the case but if we go here in the home and again in the activity Section 1 2 3 4 5 6 7 now you can see that we are retrieving seven records from the database okay okay so now we will work on this thing so here it is this one and UI so now we will work on this filter. raser page and first of all we will call we will import this view model player activity tracker. viw models name is space and now we will Define a button that will load all the records so okay so it's uh it value will be all after that we will work on our code section these two Fields started and ended and we will bind these things to these [Music] two uh input Fields okay now here we have this parameter so with the help of this we will pass some data to our parent and with the help of this we can invoke uh we can invoke method from our parent so these two things will do the same job but one uh but there is uh one difference we will pass data with the help of event call back but with the help of accent we will just invoke a method and won't pass any data to the parent now we will have this method and here we will create an object so start dat equals to start date that we have defined here and end it so these two value will come from our input boxes after that we will in invoke on select date this one do invoke sing and we will pass some data to it now we will have the handle load all method that we will invoke from this guy so on load all. invoke so when we call this method uh this thing this thing on load all will get invoked and we will not pass any data here that's why we are using it and start it equals to null and now we will bind our start date here and we will bind end date also so bind equals to end and date okay and here we will call on click method equals to we will call our methods here so here we we will call our handle let's see what was it uh select date okay and here we will call this handle load all so let's change it to capital s that should be the naming convention in C okay select it select it and here will be one more thing and date equals to null okay so everything should looking fine should be fine so here I'm just going to cross check everything is working fine or not do net build okay so we have no error so far now we will work on this manage activity. r. CS phage okay and before that we want to do one thing here let's copy this guy and open import. rer page and paste this guy here because we are going to this thing also in the manage activity. rager. CS file so open this manage activity. rager. CS page okay so now we will uh we will import a name space here which is Blazer activity tracker . view model so we cannot use our Global globally defined things which we have defined here and we cannot use these things here because these things are for components and this one is just a CS file it is not a RoR component so that's why we cannot use these things here okay that's okay so that's why we are using this thing inputting these name space this name space here and after that what we we will do we will go here at the end and here we will Define some functionality so here we will have this handle select date and it will have this parameter and we will set start date equals to filters. start date end date and if start date and end date both are notal then we will call load activities method and we will pass these things here so here we have this load activities method that's why we have right here the if else condition now we can go here inside this if condition okay and now we will call sorry Define this handle load all method and we will call load activities method without any parameters and state has changed method so whenever we are doing something from our child the state will not change so that's why we are using the state has changed method here because we are trying to change our state from the child so we need to call this method okay so that's fair enough now we can move here and we have to call these things so first thing we need to call or on select it then on load all these two parameters so go here equals to and one more which will be load all and we will call load all here that's okay now we will assign our method which we have defined here so first one will be this one handle select it so we will paste this thing here okay and another one will be manage load all and this thing will be like this okay now let's see what will happen if I type here not net run do I get some error or not let's see let's wait and run run run run run okay now we do not have any error that's fantastic let's refresh this page and let's see okay so here we have uh these records so let's search we cannot see here the record from date one let's search record from one [Music] to five let's see what will happen if I click on this search button 1 2 3 you can see now we can see these records 1 to 10 let's see yeah now we have records from 1 to 10 1 to 24 and see now we have all the records from 1 to 2 1 2 3 4 5 6 7 8 we have total eight records if I click on this all button now our state has been reset and these two things have been reset now here is one problem that has been remade now we do not have anything here we do not have actually so uh we have an error here so if I type to add 24 and because we already have entry on date 24 let's try to add something here and here we can can not see any error message and that's the problem that's the problem so let's try to solve this problem okay now let's work on that and here first of all we are going to go here and let's remove this thing State we do not need it now and let's put something here in the handle submit method so we are here in the handle submit method in the tri block at okay so let's here let's do one thing here state has changed okay and now we good so now I have restarted my system and you can see now we do not have any red uh red error messages here and state state has changed is also working fine so so our state was not changing when we are entering here so that's why I am manually triggering state has changed method here so it might uh there might be another solution for that and I'm not aware about that so I am manually triggering the state here this thing might not be that much good so do research on your own it has changed is good or not so okay so now let's run this project again and here I'm going to type dot net run that's good and let's see let's wait wait wait wait wait wait okay it is taking okay so we are done here and I'm going to click on this thing control+ uh Mouse click we open here and now let's go here and actually I already have tested tested this thing so let's see how it is going here okay so for the date 24 let's try to add this thing and we'll see of I have done it for date 25 I'm going to remove this thing again and for the date 24 mhm let's add here for and now you can this activity date already exist please add another one please select the different one so here we are done with this thing okay so now let's see what we can do now so let's go here in the activity list and let's search your list activity list. rer and here let's do one thing at the end let's go here and let's type here div class equal to [Music] PX4 that's it and okay now we fine what if I try here uh total and total hours equals to let's see at the r [Music] activities dot sum a dot total hours let's see it work or not I'm not actually I'm not sure will it work or not so let's try this okay so here let's see do net run so here you can see we have total hours 30 and what if I change it to one to 4 what will happen then so here I don't think it is going to work fine so right now it work fine it will work fine so when it will not work fine so what if I I just change it how from 5 to 4 so it should be 29 okay so it is working fine here that's extremely fine okay so let's let's change it again and let's change it to this okay it is working as expected so let's add entry for today so let's see it's 25 now let's add eight it should be 33 now so let's add worked on Blazer server project okay so okay so it is working absolutely fine and I'm amazed with it okay so one last thing what we can do here is first of all let's just stop this uh okay now after that uh let's see what we can do here let's do some decoration here so style uh font site 16 PX font weight bold so let's see how it is how it is looking net watch run and we will run it in watch mode so that we can tweak our CSS so here we can see we have little bit CSS here but we need to change it to 20 6 PX and let's see how it is looking okay so total hours 32 okay so that's too big let's do it to 22 let's see how it is looking and uh yeah it is looking much fine now uh total hours 32 so that's good PX P it should be py4 not PX now we are good so py4 and P4 is too much so let's do it py2 okay now we are very good here so we have this home activity login sign up and we haven't work on these things and that's totally okay so it is our app we have finally compl completed our application so I think that's it for this project so yeah that's it for now see you next time

Channel: Ravindra Devrani

Views: 906

Keywords:

Id: jofW-25Iews

Length: 201min 3sec (12063 seconds)

Published: Fri Oct 27 2023