in this video we're going to create a simple invoice application with r on back end and view js on front end on the end of this video we get application like this you can see our invoice list create a new invoice for example here add customer du a date reference number add items add quantity add discount and add notification and then save it in our database all right you can see the invoice details print invoice edit invoice and delete invoice all right let's now start a new R application by open up our terminal and make sure we're in a good directory where I'm going to create our project for me I am in desktop / tutorials the first thing I want to do is to create a new project with composer create r slash R and the name of our project since I'm going to create an invoice application I'm going to call it invoice Dash app all right right our application has been created let go ahead and CD into our invoice SL app and open it in our vs code let now open Terminal in our vs code and run PHP Artisan serve which should spin up our website for me and let's open up this URL right here in our browser cool so our lare application is installed and we can see our default L application installed here the next thing I want to do is to open up a new tab in browser and open up this Ur roer host PHP my admin and create a database code invoice Das app- DB okay let go now in our vs code and see our project the first thing I want to do in my project is to open up the EnV file this environment with holders or our database connection information so I want to set up a database since we are going to be using r and my SQL I have already created database called invoice Das app- TB my username is going to be root and my password just root root that should be it for our envi I'm going to open up a new tab terminal because I want to create a model migration and Factory files for our database is now that is linked so we create a model with immigration file we can use PHP artisan make model which going called counter dasm all right we can see our model was successfully created and also created immigration file so let's take a look that appear in our database photo on migration you should see counters table now what we are going to do is to add some columns in our new counters table the first thing I want to do is string key which is unique table string prefix the next is table string [Music] value so now our database is connected to our EnV file we can create our migration file let's create this out and run this Migration by using PHP Artisan migrate we can see that is migrated this file and along with other some files that were in the Migration by default we are not going to be using those now we are going to create some item to our counter R create this out and run PHP artisan make Factory the name of our Factory counter Factory let's go in our database on factories and you can see count Factory let's now add some items key invoice prefix IV value okay let's go now in seeders on database SE just Inc comment this line and change user to counter all right let's now run our seed PHP Artisan DB seed okay now we are seeding the database head create now and run a new model with PHP artisan make model product- m c now we are create a new tabed called products let go on migration on on product table and add some columns table string item code which will be unique table text description table dble unit price okay let's go in our terminal and create this out and run our Migration by using PHP Artisan migrate okay a migration being created let's create this out and create a new Factory of our product with PHP Altis make Factory and the name of our Factory which is product Factory all right let go in our factories foldo on product Factory and add some items okay item code should be IC 1000 dot round which should be between 10 and 5,000 description you can add any description you want okay the name of our product we've run which will be between 10 and 500 unit price empty Rand between 1,000 ready go in cedar on database Cedar and copy this line and change counter to product and after go in our terminal and learn new Factory immigration by using PHP Altis and DB seed okay now we are going to continue the process by create the terminal by create a new model with PHP artisan make [Music] model customer - m- c all right go in our migration on customer table add some columns table string first name table string last name take table string email which will be unique table string address all right after that let create the terminal and learn PHP artisen migrate okay create the [Music] terminal create this out and run PHP Artis make Factory the name of our Factory which will be customer Factory go in factories on customer Factory and add some item here first name which will be this fer name last name this Faker name email this faker email address this Faker address all right let's create the terminal and learn PHP Artisan DB seed okay and create a terminal let's learn now a new model with PHP Al and make model the name of our model invoice go in migration on invoice table and add some columns [Music] table string number which will be unique table into customer ID table date date table date due date table string reference which will be neurable table text terms and conditions table double subtor table discount which will be by default zero table T torture okay let's create the terminal and run PHP Artisan migrate all right I create a terminal and run PHP artisan make Factory invoice Factory okay which will help us to add some item number this fake number between 10 and 1,000 customer ID this fakeer number between 1 and 20 date this fake date du a date this Faker date reference ref do Rand between 10 to 500 terms and conditions this figer paragraph all right subtor this F number between 10 100 and 1,000 discount this fer number between 10 to 100 total these f SC number between 20 and 2,000 okay let's go in terminal and create a terminal and PHP Artisan DB seed okay let's now create a terminal and add a new model with PHP Altis and make model the name of our model invoice item okay let go on invoice item table and add some colums table integer invoice ID table integer product ID table DOR unit price table integer quantity after that R create the terminal and run PHP Artisan migrate okay migration has been created let create the terminal and run PHP Al design make Factory the name of our Factory which should be invoice item Factory okay go in our factories on invoice item Factory and add some item invoice ID this fakeer [Music] number between 100 and 1,000 product ID this fer number between 10 and 100 unit price these fre number between 100 to 5,000 quantity this fer number between one and five okay we create the terminal and go now in on database SAS we are going to add a different model I was forget to add invoice in a unit okay let add invoice all right and run PHP debit seed uh invoice item okay and run PHP Artisan deed all right create a terminal now I'm finished to add model migration Factory and create some controller let close all those files opens we will no longer need it again let now go ahead and start the new part of our application which will be the front end of our application we begin it by install vew GS view roots and View Road and packageone dependencies which will help us to compile our JavaScript all right let's now jump up in our terminal and learn npm install view Dash load next view next view Dash root next all right we finish to install it and ready to create the terminal and run again npm install V gs/ plugin dvw d-force this plug-in view will help us to run few GS in vit GS all right the pling view is install we now create this out and run npm run Dev let's now go in our invoice project on V.C config.js and import view from vit GS view plugin and add view here okay all right right now we finish to configure vew GS in our vit file config and let's now go on Ros Source in Gs and create our first view GS component let Begin by create a new folder called component in component folder we will add app. View and in view file we will add template okay H1 hello this is my first vs free component let now go in app GS and import create app from view import app from dot sl/ component slash view. app create app app do Mount app all right let now go on view on welcome blade PHP file and select the content of this welcome blade remove it and just add a div which will get ID app this ID app will come from our view app view GS file let's now remove our default Style and add our Style by using vit Rus SL CSS SL app CSS let's add GS by using vit Rus SL gs/ app. GS all right now you can see in our browser our component is mounted okay all right let's now go in our vs code on resource in Gs on component and create a new folder called invoice and in invoice we're going to create a new file called index. view all right and in index. view let add template H1 index invoice app component all right let's now create a new VJs file on our component called not found do View and add template page not found okay after that let now create the view root first we are going to create a folder called rotter in router we're going to add a file called index. GS all right in that root index GS we will add import create router create web history from view. root create a new con called rotor create rout history create web history all right let export to default router let now import invoice index from dot do/ component SL invoice slash index. view import not found from dot dot component slash not found. view okay right now create a new con root array all right let's add path slash component invoice index path slash puff match component not found all right let's now this Con roots in our root con all right let go on roots in web.php and add root get PA Match function return View you welcome where PA Match all right this root will help us to return not found page in our R so right now go on roots in index. Gs and just change here it will be component all right after that let go in our app. view and remove this line and add router View all right let's go in app. Gs and import router from SL rter SL index.js okay let now add use router all right and let's go now in our browser and you can see our index invoice page component all right we can add whatever in the as Z and you can see the page not found is called all right let's just add in our not found page r T link which will help us to go back to our index page okay back to Homage all right to slash all right this link will help us to return to our homepage okay now our view rout work well so let now learn how to display all invoices we have in our database so the first thing I want to do is to add the template for application by open a new tab terminal and go to the gith repository where is the templates let's open a new tab in our browser and go to this URL github.com slash share Das tutorials Das Dev in this reposit history R go on invoices html-css in index. HTML select and copy this part all right let go now in our vs code in our index. view remove this line and add a div with class container and pass the template that we copy in a unit all right so R go back in our GitHub repository and copy the style CSS in our invoice dhtml ddev on asset on CSS in app. CSS select and copy the content of this app. CSS all right reg go in our vs code on resources on CSS in app. CSS and pass the sty that we have copy in aunit all right now we can see the template that we are going to use so red go on our invoices on index. view and add script setup in script red import unmounted ref from view let's now create an object right the name of our object invoices which will be a ref let's now add unmounted I think unmounted let's add a get invoices method that we are going to create in a unit okay let add con get invoices I think this method will return response await axos doget API get or invoices okay let's add a conso log response response now we are going to get to add a get or invoices rout which will return all invoices from our datab base okay we go in our roots on API and add Roots get slash get all invoice invoice controller get your invoices for all right let's now call our invoice controller by use app HT HTTP controller invoice controller okay let's now go in our invoice controller and create a function called get or invoices all right before to add our function we are going add a model called invoice by use app models invoice all right let's now create our function Puri function the name of our function get or invoice invoice invoice or return response Jon invoice invoices all right let's now go in our browser and inspect element to see that our invoices is called Rego in conso and you can see our invoices is called let now go in our index. view and in a comment this console log and add invoices. value which will be response dot data dot invoices all right let go in our template now and add our invoices in this table by by doing View for item from invoices key item do ID vif invoices. rent all right if we don't have an invoices we return invoice not found all right let to go ahead and add item do ID item do date item do number item Dot customer ID item do du date and item do total all right now you can see our item is appear all right as you can see our c customer is showed by the ID now we are going to change that and get name of our customer to do that we are going to return in our vs code on invoice controller and the return invoice with customer all right or by ID desk get okay now we are going to add a function in our model let add public function customer return this belongs to customer crass return in our index. view and in a comment this console log okay let's return in our browser on inspect you can see our customer is now appear for each invoice all right where go in our index. view and change customer ID with customer do first name if item customer exist okay if it is not exist we are going to add vs which will show nothing all right now you can see our invoice list so let's now run how to stretch an invoice in our list of invoices so let go in our vs code on index. view and add a new reactive state by adding red stretch in voice R all right so right now add the new function which will stretch invoice con add the name of our function called stretch a sync rate response await axus doget /a/ sled invoice question mark s equal price SL invoice dot vary all right so now we're going to create a new route in our api.php called stretch info voice ready go on roots in api. PP and add new rout R copy this root okay P it here and remove get all invoice and add stretch invoice and here we're going to remove that one and add stretch invoice we now create stretch invoice function in our invoice controller let go in our invoice controller okay and create a new function fabric function the name of our function called stretch invoice request request and create variable stretch request get is if variable stretch is different to Nile we will return variable invoices which will get invoice with customer where ID like percent variable Str percent get all right let now return a response with a Jon invoices invoices all right El return this get or invoice all right now we finish to create our stretch function in our invoice controller ready go in our index. view in our stretch function add a console log response response do data do invoices all right let's go in our browser and inspect that our invoices is called where all right let's now return back in our vs code in index. View and add in our stretch function invoices invoices dot value equal response dot data do invoices all right ready go now in our template add a v model stretch invoice variable and add a key app which will called our stretch function all right let now go in our browser and verify that it work well let's add something here in our input seetch oh I get an error let's verify where is the error all can see here I'm going to correct and add a response all right now verify that error is not exist again all right to work very good now you can see when I add an ID in our search you can get a specific invoice it if to exist all right now we finish to add our our stretch function to our simple invoice application let's now learn how to create a new invoice by first add form data and the template so the first thing I want to do is to go in our vs code on resources on gs on component on invoices in index. view and I'm going to add a new function con the name of our function new invoice a sync L form await axus doget SL API SL create invoice all right let's go in our roots on api.php copy these roots and past it all right we change here and add create change here and add create also now we are going to create a function in our invoice controller called create invoice okay we go in our invoice controller and create a new function public function the name of our function create invoice request request let add variable count which you return count where K is invoice first let's add a model called count all right to continue by create a new variable random counter where [Music] key is invoice all right variable invoice invoice order by ID desk first if we have invoice invoice invoice ID price one variable counters equal counter VAR price invoice else counters counter value all right let's now create a form data by use a variable form data number variable count prefix dot variable counters customer ID we be n customer n date date do a date n reference n discount zero term and conditions will be default term and conditions item will be product ID Nile product Nile Unity price zero and then quantity one all right let return our response Jon we form data all right let go in our index. view and add in our function new invoices and add cons. Rog form form dot dat let's go in our browser and inspect all right on console and you can see our form is appear return back in our vs code import use router from view router let add con rout use router all right let's go now in our new invoice function and add root do push slash invoice SL new this function will direct us to this new URL invoice Das new all right it go in our template and add a click button on this button new invoice all right let's now go in our browser and when we click to new invoice it redirect us to page not found because we are not we are not create the new invoice for the moment we'll go in our vs code create a new component on invoices called new. view all right before add something let's go in our browser and open a new tab in our browser go on our GitHub repository which is github.com SL share- tutorials dasd all on invoice HTML CSS open index. HTML and go here and just copy this part of our tempate all right let's go back in our vs code on new. view component and add template add a div called container and pass our template all right ready go on our router in index. Gs and import invoice new from component invoices new. view on root add path invoice SL invoice SL new component invoice new all right now we are going to verify that our template is appear or right can see our template is here now all right let's now make an inspection if I click to new invoice buttons it will redirect us where we are going to create a new invoice and add the default form data from our invoice controller function all right so that is all about to create form data and add template so now we are going to leun how to insert invoice in our database so the first thing I want to do is to go in my vs code on resources on invoice in new. View and add script setup [Music] import unmounted ref from View create rate form ref and then create a const index [Music] form a sync R response await axos doget slash API slash create invoice cons log form response do data all right now we are going to amount this index function that I finished to create on mounted a sync index form all right let's inspect here go on Console Rog okay all right can see that our form is called let's Now Inc comment this console log and add form do value equal response. data all right now I'm going to mount it or customers which are going to use when we are going to create a new invoice all customers RI rate customer ID R all right let now create function con the name of our function called get or customers it's sync right response a wait a.get SL API SL customers now I'm going to fch all customers all right before let go on roots in api.php copy this root and past it all right let's now change create invoices to customers and also change here create invoices to or customers now I'm going to create a function on our uh customer controller called or customer all right let's now call our customer controller by use use TTP controllers customers controller okay we go now in our custom controller and create function or customer by use puric function the name of our function or customer all right variable customers customer order by ID desk get all right it's now now called my customer model use model customers all right this function or customers will return response Jon customers variable customers all right let's now go in my new do view just add a console Rog response response all right now I'm going to mount it our function get or customers all right let's now go in my browser and inspect that our customers is mounted all right you can see our customer is mounted all right let's go now return in our vs code then comment this console Rog and add all customers VAR equal response do data do customers all right now I'm going on templates on select tag where we going to put our customer at V model customer ID on option the first option going to be disabled all right another option I'm going to add v-4 customer in or customers key customer. ID which will show customers do first name all right let add VAR customer do ID all right yes I'm finish here let go in my browser and verify that I select tag for customer workware all right now I'm going to continue on my vs code in new. view in my template add V model form dot date V model form do a date V model form DOT number V model form do reference all right now I'm going to add items here be to add items I'm going to go in script and add R item RI R rest card R okay and the create a new function which will return all items I'm going to use const add card with param [Music] item const I item cut ID item do ID item code item do item code description item dot description unit price item do unit price quantity item do quantity list cut var. push item cut all right let's return in my template and add V for item card e in rest card K item card. id item card dot item code item card dot description V mod item card dot unit price V model item card dot quantity V if item card do quantity item card dot quantity item card do unit price else we are going to add nothing if you haven't item quantity we are going to have an Mt all right now we're going to open a model which will will contain the item that we are going to select let add a quick open model function which we are going to create in a unit all right we go in script const so mod R first con hide model ref through this Con will help us to open and close more door all right let's create a function con open model show mod do vary will be different we show mod VAR all right let's go now in your template on add modor item class show show mod all right when I click it open a mod all right now we are going to add a cross model button by add click cross model function which are going to create in a unit okay let go in a script and create cross model I add cost cross M show mod vary which is different with hide model valy all right let's now verify okay can open and close okay I'm finished to add function which will help us to open and close a model all right let's add a close model to this button click cross model yes this function cross model okay all right let's now go in our vs code and add a list of items in our model which will be used when we are going to select item that we going to add to our card of invoice okay let's list products riff create a [Music] function con get product a sync rate response a wait axio doget slash API slash products now I'm going to create a root which will return all products from database let's go in on roots in api.php copy this root and past it change this customer to products and or customers to or products all right change here product controller let's called a product controller in our api.php all right by use pay HTTP controller product controller all right and now go in our product controller to create a new function fabric function the name of our function called or product variable products which return product or the by ID disk use model product let's now return response Jon products variable products all right now I'm Going In My New View and add a console log to verify that our function is workware conso log products response okay rate amounted our get products go in my browser and inspect that our product is appear as you can see I made a mistake let's verify where is a mistake my product [Music] controller oh I forget to add get here okay all right let now verify that work or okay you can see now our list of product R continue and add our list of pro product in my modor here V4 [Music] item e in rest product k k item. ID let add some Style all right this just the some style that I add p e price [Music] one item do item code item dot description add a button price all right let's add a function to this button a click add card function which will get a param item all right let's add some style to this button all right all right let's now verify that appear in our model oh there is an [Music] error here to [Music] verify that's oh I forget to add add a list product in my gate product function list product do vary will equal response do dat do products all right now ready to verify again all right you can see our product is appear in this model but there is an error we start R change something here and add okay and copy or the content here okay all right now you can see our list of product is appear in our model where I'm not a big designer but it can work okay Rec continue and add this function cross model in our function add cut all right now you can see when I open more door and click to a specific product it appear in our list of items which we are going to use to create our items all right it work now I'm going just to add a remove function which will help us to remove a product to our list of item reg go in my vs code and add a function when here click we remove our product a click remove item function which I going to create in imunity where go in our script and create a new function called remove item cost remove item wrist cut. vary do sprit e one okay let verify if okay all right okay open model add another item add quantity to work let remove some item all right as you can see we finish to add item to our list we continue Contin by going my vs code in my template and add V model form do terms and conditions let's create a function which will return sub toal all right con the name of our function I'm going to call it subtor rate total equal [Music] Z rest do VAR dot map data total equal total price data do quantity data dot unit price which will return totor all right we go in my template and add subtor function all right let's just verify okay the sub total is appear now now I'm going to add a discount V model form do discount all right to grand total I'm going just to create a function cost total which will return sub total minus form dot value do discount all right let's go now here and add total function right verify okay you can see subtotal appear term of condition now is appear now I'm finished let's now create a function which are going to save our invoice in database we go in my vs code create a new function const name of our function on save if list card do vary dot length one rate subtotal equal Z subtotal subtotal rate total t totals all right con form data new form data form th dot append invoice item stringy list cut do value let's copy this from data change invoice item to customer ID and change here custom id. value copy this line pass it change here date and add form. valid dat copy this line change here do a date form do value do do a DAT copy this line change here to number and here two number and continue copy this line pass it change here to reference all right let continue add discount all right add subtor Twitter TS and conditions axos dopost slash API slash add invoice form data rest cards dot value which should be an empty table and after we are going to direct to our list of invoice root. push slash all right now I'm going to create a new Roots which we going to be called add invoice okay ready go in my roots on api.php copy this root and past it change here to add invoice and here add invoice and I'm going to change here to post and go in my invoice controller create a new function fabric function add the name of our function called add invoice request variable request variable invoice items request input invoice item invoice data sub total request input sub total right let copy this line and pass it change sub total to total and here change to Total continue copy this line pass it change total to customer ID it's now add a new [Music] line number date do a date discount reference terms and conditions variable invoice invoice create variable invoice date all right for each Jon decoder variable invoice [Music] item has item items data product ID [Music] items ID let copy this line and change product ID to invoice ID and here variable invoice okay new line quantity to quantity item data unit price item unit price all right invoice item create variable item data all right let's add a modor invoice item all right now we finish to create our function where go in my on my moders in invoice. PHP add a protected fillable total custom ID [Music] subtor date do a date reference discount number terms and conditions all right let's go in my model in invoice items add a protected fillable product ID invoice ID quantity and then unit price all right let's go back in my view component in new do View and add on Save buttons our function called on save all right we go in my browser and verify that it work select customer do dat add reference add a new line of item Okay add quantity and the second line of item write something in termin condition add discount and click on save button to verify that it work oh let's inspect I'm get an error yeah I made a mistake let's verify the kind of mistake that I made all right I go in my vs code and verify where is mistake all right let's verify here I made a mistake here I forget to add a Gon Do string F okay let's change here to subtotal all right and change here to totor now let's continue and verify if to work again select item add du date add some reference add line of item quantity I got again a mistake let's verify or I add a bad root let's just go in my roots and change product controller to invoice controller yes my function was created in invoice controller not in product control all right I think there is no mistake stay again let to verify it in condition all right now it work well okay so that is all about create a new invoice so let's now run how to show invoice so the first thing I want to do is to go in our vs code on invoices in index. View and add a new function const the name of our function ction on show add param ID router. push slash invoice slash show PR param ID ready go in template and add these function that we have create in a unit you click on show item. ID all right ready go now in our browser and click to a specific invoice and verify if to will direct us to a specific invoice details all right to directors but to show us that the page not found let's go back in our V code and create and create the show page all right we go in invoices and create the new page called show. view all right rate add templates and add a div container okay in our GitHub repository and copy this show invoice HTML and add it in our show. view all right now let's go in our router in index. Gs and import invoice show from components invoices show. view all right add in con Roots path slash invoice slash show slash param ID component invoice show all right add props through let's go back in our browser and verify that our details of invoice template is ADD where right click to this invoice all right it will direct us to our our show page let's go back now in our vs code in our show. view remove this one okay all right you can see where in our browser now we are going to add the details of this invoice from database let go back in our vs in show. View and add script setup import unmounted ref from View R [Music] form ref ID const props Define props ID type string default all right let's go now and create a function con the name of our function get invoice a sync R response a weight axio doget add back type slash API slash show invoice slash variable props do ID let go now in Our Roots on api.php and add the new root R copy this root and past it all right let's now change here to show and post to get all right let add a param ID [Music] change here to show all right now we are going to create a function called show invoice let go now now in HTTP on controller in invoice controller and add a new function called show invoice all right public function show invoice and add param ID variable invoice invoice with customer find by ID all right we will turn response Jon invoice variable invoice all right finish to create our function go now in our show do View and add a cons Rog form response. data. invoice all right let's Mount this function un mounted is sync get invoice all right our function is mounted let go in in our vs code and verify if our simple invoice is called in our console all right now you can see our invoice in our console Red Cross it and go back to our vs code in show. view on our get invoice function add form. vary response. data. invoice all right WR in comment this conso Rog all right ready now go ahead in our template and change here form. ID for form do created at form. customer do first name VF form. customer is exists all right now we are going to add our form do number form date form du a date form do reference all right now we are going to finish by add our list of items before to add our list of items let to verify in our browser if to work oh there is a mistake let to verify where this mistake come from or I made a mistake here let's change here to form. date all right let reload this page and verify now if the error was removed all right now you can see the details of our invoice right now we are going to add the list of item of this invoice we go in our invoice controller and add invoice items all right let's create in models in invoice. PHP a function called invoice items fabric function invoice items which will return this has many invoice items class all right let's now verify in our browser if the invoice items is appear let's zoom and show if our invoice items is add all right you can see our invoice items we go back in our invoice controller and add dot product all right right go in models in invoice items and add function public function product return this belongs to products class this function all right right now go in our browser and verify now if our invoice items is appear all right and product also is appear okay let's close this conso go back to our show. view component and add the list of our invoice items V4 item e in form. invoice items key item. ID e price one item. product. [Music] description item do unit price item do quantity item dot unit price M price by item. quantity all right let add subtor form do [Music] subtor form. discount form those terms and conditions from do totor all right now I'm finish let's remove this one I just add add this HTML tag to make more presentable all right right now add a function which will help us to print invoice we go in our vs code and add function con print windows. print router do push slash catch all right we add this function to our print buttons a click print all right now we can see we can print invoice all right so let's learn how to update invoice so the first thing I want to do is to go in our vs code on resources on invoice in show. View and create a new function Con on edit add param router. push SL invoice slash edit slash price ID all right I go in my template and add this function that I has create in a unit a click on edit add param form. ID let's now go our browser and click on edit button to verify if the direct as were all right you can see it direct to a new URL but the page is not found because we haven't created for the moment we go back in our vs code and create a new component on invoices called edit. View and add template add the div container and go in our GitHub repository copy copy the HTML template go back in our vs code in edit. View and pass it in div cont all right let go now on router in index. Gs and import invoice edit from components invoices edit. view all right let's go in Roots now and add PA slash invoice slash edit ID component invoice edit props through all right let's now go in our browser and verify that our edit. view component is appear all right let's now go back in our vs code on edit. view and add script setup import on mounted ref from view red form ref ID const props Define props ID type string default all right let's create a new function con get invoice a sync red response a wait axos doget slash API slash edit invoice slprs doid let go in our roots in api.php copy this root and past it change show to edit here all right now we going to create a new function in our invoice controller public [Music] function edit invoice param ID where go in show invoice function copy the content of this function and pass it in our edit invoice function all right let go in our editor View and add the conso Rog [Music] form response. data do invoice all right it Mount this function on mounted a sync get invoice all right R go now in my browser all right our get invoice is work Square we go back in our vs code in edit. view all right now I'm going to use the different function come from in our new view component all right R copy these two line go in our edit. view pass it here go back in our new do view copy this function get all customers P it in our edit. view all right go back in our new view copy get or customer on mounted and pass it in our edit. view on mounted function all right go back in our new. view copy the select tag and past it in our edit. view all right let go in our browser as you can see you can see our list of customer all right now we are going to make a simple change here to get the name of our specific customer for this invoice all right form. VAR response. dat. invoice let a comment this line it is no longer necessary form Dot customer ID all right you can see the name of the customer of this invoice let go back in our vs code and continue to add different details of our invoice V model form. date V model form do du dat V model form do number V model form do reference by add details of our items V for item cut e in form. invoice items key itm card. ID all right V if item card do product item card dot product do it item code item card do product dot description VLS item card Dot item code item card do description all right V model item card do unit price V model item card do quantity item card do quantity multiplied by item card. unit price all right all right let go in our browser now you can see the details of our items for this specific invoice now we are going to add a function that will delete an invoice item ready go back in our vs code in edit. View and create a new function con the name of our function delete invoice item add param ID e form. var. invoice items do spit E1 if ID is different of inde Define a.get SL API SL delete invoice slash items price ID now we are going to create the delete invoice items route all right ready go in our roots in api.php copy this line past it change here to delete invoice items and here to delete invoice items now we are going to create a function in our invoice controller which will delete an invoice item all right go in our invoice controller create a new function public function the name of our function delete invoice items add param ID variable invoice item invoice item find or fail variable ID invoice items delete all right let's go back in our edit. View and add this function to our delete buttons a click delete invoice items item card do ID e all right let's go now in our browser verify that our delete function is work oh it not work where let inspect in console log to verify where is mistake go back in our vs code in edit. view on our delete invoice item function oh I made a mistake here we going just change to this Spight to spli all right yes right now go back in our vs code and click on delete invoice items buttons all right our delete function is required now we are going to add new line of our items we go back in our vs code in new. view copy these lines go in our edit. view and past it here all right we go back in our new view component copy this function and go in our edit. view pass this function here go back in our new do view copy this get product function on mount it and go in our edit. view on Mount it and and press it all right go back in our new do view in our template copy this Ur tag go in our edit. view and past it here go back in our new do view copy this class go in our edit. view past it here copy this close model go in our edit. view add it here all right add this here also and go back in our new do view copy this open model past it in edit. view all right let go back in new. View and copy these two function open model and close model go in edit. View and P it here all right let's now now verify if it work on our browser all right but we found an error let inspect where is the error come from do come here we are not create an Adat function in our edit. view we go in new. view copy this add card function go in our edit. view and pass it here all right let's just change here product ID and in comment this line and add form. vary do invoice items. push item card all right let's go back in our browser and verify that I can add a new line all right can add the new line and remove the line now I'm going to finish here by add term condition sub total and total all right let's go back in our vs code in edit. view and add V model form dot terms and conditions all right go in our new view component copy the subtotal function and pass it in our edit. view all right and then change here to form dot vary do invoice items if add it in in our if condition all right if all right now we are going to add this subtotal here all right uh the discount V model form do discount all right now we're going to add a total go in our new. view copy this function total P it in our edit. view all right and add if condition form. vary do invoice item we will return this sign let's add this total function we are just creating AIT here all right yes let's now go in our vs code and verify if all work well very good now we going to create a new function which will update our invoice we go back in our vs code on invoices in edit. View and create a new function which will help us to update our invoice con the name of our function on edit add param ID if form var. invoice items rent is super or equal one we are going just narrate function to see if our edit function work let's just go in my template and add this function that I create in aunit to this buttons I click on edit form do ID read verify all right just add the new lines of items and click on save button all right you can see our AR model is appear and now go back in our vs code in edit. view on our edit function all right let's now just go in new. View and copy all the content of our save function all right and go in our edit. view on edit function and then just past it here all right let's now make some modification now we going to use form. val. invoice let's past it here add here form. var. custom ID change our axio post to API slash update invoice voice and add form. var. ID form data change here to form. vary dot invoice items all right now I'm going to create this update invoice routs we go in our roots on api. view just copy this root past it here change get to post and here to update invoice and here to update up dat invoice now I'm going to create an update invoice function in our invoice controller all right we go in our invoice controller and create a new function public function the name of our function update invoice and then request variable request variable ID all right variable invoice invoice where ID variable ID first all right variable invoice subtotal variable request sub total copy this line change sub toal to Total all right copy this line change here to customer ID copy past it change to number dates do a date reference terms and conditions all right just another [Music] line invoice discount all right variable invoice update variable request or all right invoice items variable request input invoice items variable invoice invoice items delete for each Jon de code invoice item as items item copy this content of this for each gon past it in our new for each gone that we create in a unit all right change here to product ID all right let's go back in our browser to verify if we update our invoice where let's just add the new lines click on save button all right insect in our console if there is no error or there is a mistake let go back in our vs code in edit. view I was just forget import view root in my edit. view component before it let just verify if I was add it also in my show. view component all right uh I was forget it to add it let's just add add this view root in this show. view component import use root from view root const router use root let's now just copy this view root go in my new. view and pass it here and also go in my edit. view and P it Roots here again all right now I think this mistake WIll going to disappear let's just verify on our browser just some line all right click on save all right now you can see a more direct where but we still have a mistake our info voice items details not appear ready to verify also where is the mistake let inspect I open the console R all right let go in my vs code in invoice controller verify if there is no error okay and go also in my edit. view to to verify where is a mistake or I was just make a mistake here on this line all right as you can see I was right in my invoice controller on this line invoice items but in my edit. view I was just right invoice item the mistake was here I think we will will no longer get another mistake let's just verify all right let's now go on edit invoice add the new lines of items all right and click on save all right I think there is no mistake again as you can see when I click on show invoice details you can see the new line that I has finished add in a unit all right now we finish to update an invoice ready go now to create a delete function which will help us to delete a specific invoice all right I go back in our vs code in show. View and create a new function const the name of our function delete invoice add param ID AOS do get/ API SL delete invoice price ID router. push slash okay let's just add a delete invoice function to this button a click delete invoice form. ID all right now I'm going to create a new rout in Our Roots in api.php copy this line past it here just change here to get and here to delete and also here to delete all right ready go in my invoice controller now and create a delete invoice function public function delete invoice param ID variable invoice invoice find or fail variable ID all right invoice invoice items delete and then invoice delete all right let go back in our vs code and click to delete as we can see our invoice was deleted all right that is all about of this tutorial if you have any kind of question you can ask me your question in comment box thank you for watching this video and don't forget to subscribe to my channel it motivate me to keep going thank you for watching
