Create a Website Invoice Template for it Effortlessly

Website invoice template for IT

[Music] greetings everyone this is an example of the invoice generator that I have converted from react to JavaScript in this tutorial it is going to also have the ability to print that out and this is not only the invoice but is the beginning of your team's um task management so the workflow will all start not only with the invoice but the team will work on this list as well as far as projects to be taken care of here you can see that it'll generate and print out or you can save a PDF style of the actual work order that you generated and it's all done and hosted on GitHub for free let's go ahead and uh kind of delve into what I did to take this project out of a react JS application and into a vanilla JavaScript application that anyone can use without even running any kind of compiler and let's get started so let's go ahead and build out the file directory I'm just going to run the console to build out folders and some generic files that we're going to need to get everything running locally and you don't have to name files functionality or style.css you name them whatever you you're used to this is just what I'm used to so let's go ahead and serve locally and as you notice the hierarchy is here with the footer JS and I've got the elements and the uh the footer elements so I'm now going to extract the react file this work order form J s I'm going to take all the functionality and then obviously the jsx it will be more of the that will be on the index.html and then the JS functionality of this workorder form JS file will be basically copy and paste it over so we can get it going obviously use effect and the load ID this is not going to really do anything good for us because we're not we're not going to have an API anymore everything's going to be local storage so the way that the functions are running and the way that the everything is building is going to be different we'll build it on load as opposed to mapping a lot of things and as you can see here I'm in I've inserted the HTML above our old footer that we're familiar with I'm taking all the maps from all the dropdown menus they're number they're drop- down menus with numbers like how many modules is this events how many modules do you want event events to have how many events or how many images are you going to have modules for like slideshows this and that these all are the same drop down numeric dropdown so what I'm going to do is change the functionality on uh on these HTML elements so that they work in static JS and then I'm going to map them out initially in a string and then attach them later on once the page loads so we don't use map per se we use a for Loop to build it and then we just have it an HTML Target and as you can see I'm just busy going through all of function calling and making it correct Syntax for using your standard vanilla Javascript file instead of react so we're not really doing a lot of you know use effect and uh use State because it doesn't really exist in here um but those are just as easy to replace and use as a variable instead so it's actually less work and very easy to happen it happen St it actually happens faster than set state so um you don't have a waiting period that you have to deal with and I'm still kind of coming through here and and now I've copied the functionality I don't need to import anything because this is no longer react um all these used states are useless now because I'm not using react so I'm I'm just going to write them all again in a variable format just like we learned in college and we'll initialize them with the empty objects but we will uh allow them to have the let option so they'll be able to update as opposed to const and all these arrays are going to be nested into an object so some of the the light the lighter easier parts of the object will be one layer deep but these form arrays and uh events arrays and all that and image arrays those are all going to be nested arrays in an object so like I said we're not using um set State anymore so our functions our variables are going to be updated by just a simple equal sign here as you can see what I'm doing in our switch case so we still want to make sure that these are correct once we walk through and add them but we can't use uh the same syntax so I'll keep them up here so that you know what I did and what I what I had before and then you can kind of see how I I I changed the file to basically do the same thing but just for vanilla JavaScript and it's the same as I'm doing here once I get the data I need to set it into the object so this is how it's all done and then below this you'll can see that this is that's where I'm building out the information that we've we've been typing in Okay so okay so yeah we'll just keep walking down this little line of of items that need to be updated now these are all basic uh things that you see on our our um generator like uh the crud application is basically how many apis you're going to have and the images would be in reference to a like a con a Carousel and similar with the videos it' be a car cell for that too so these are all modules that you would technically already have built well let's just keep going we'll keep going and establishing these variables that we're going to use now we're also going to need to bring in a couple of files that were in the other react one timestamp invalidate or both function files that were kind of living on their own and I'm I'm going to go and copy and paste those in now clear all right let's turn off the exports and then start building the hierarchy for the file so instead of importing and exporting files with generic JavaScript basically we're gonna add a tag a script tag and a a link to a CSS so it all depends on where it is um if you are calling things in a certain file that exists in another file the one that has the original call needs to be on top obviously and then as far as CSS concerns what you want the rules you want to actually apply that override everything need to be last so if you have bootstrap uh you want to have your local Style CSS underneath bootstrap to overwrite it and then JavaScript if you have like some kind of shared file you leave that one on top and have your local files on the bottom so they can all call and work together in tandem without confusion it definitely depends on which one is in order H not so much when it comes to importing and exporting in react okay now that we're back in here looking at what we have my bootstraps working I can see that there's some uh the footer is showing that uh there's some overlap as you can see so we got to fix all that and it won't be hard we just going to add some stylings locally and that should be helpful enough and luckily I can always use the panel down on the right to see what it will look like once I actually make the change without actually up the file obviously you just type whatever you want and you can see does this work or not and then that dials it in on what you know kind of padding you want or what you want your background to look like for your footer without you saving the file and going through the motions like that just use the panel uh developer panel at the bottom of the browser for those quick updates and then when you're done with what you want go and make that change and save it so I'm going to go ahead and do a little bit of what it looks like I've got an error here but you can see that we're basically using the same functionality that I had with the react I'm just not using the apis and so I don't need this one big function at the top to encapsulate everything like I wouldn't react I just need it to run onload for a couple things as opposed to use effect and then from there everything that's imported is just done with a link instead in a certain hierarchy so I think what I'm going to do also with this is I'm I'm going to not have the fixed option for the footer it doesn't need to have a float it doesn't need to float so let's just fill out the form and just kind of see where we stand it looks like it's not building out those uh just yet those Maps aren't working so let's go ahead and take care of that as well so we replace all the map functions for the dropdowns with something a string that we load on uh the beginning of the page when we first load so every time I want to have these numbers represented in a select dropdown I'm going to do this numbers total and then I'm going have a number like basically that's the the total amount of numbers I wanted to iterate and so I'll just pass that along when I do the JavaScript numbers total and then you know do 25 iterations and that'll be that and now I'm also going to do all these for the modules because this is these are all for the on modules only and you can see that for Loop up there where I've built out an iteration of uh 25 so I basically now I'm going to build out the string that will go inside of those drop downs that will be iterated from 0 to 25 and like I said this used to be in react we were mapping we're going to map kind of loop through but now no we're just doing it this way and then we have a Target that we want to point this HTML string at once it's been built and that Target would be the select menu option area and as you can see I'm just building that out right now all right so once it goes through each of the elements I want to get the attribute of how many iterations it has and then when I do the for Loop I'll say hey is it up to this iteration yet 25 and if so we're going to stop printing so that's why I put that number in there like first off I know which ones I want to run through the loop with and add this and then now I want it to stop at 25 and there you go so anytime I see that that data attribute I basically apply this list so let's go ahead and fill out what we got and see how this is being generated now now a Blog I I want to get their RSS feed their address so I can actually plug in the blog in the website but it doesn't look like it's running just yet as you can see it's not creating the nested list that I want so let's just make a a quick fix yeah so there's my bootstrap let's do a little bit of um repurposing and I want to get this hierarchy correct so as you can see it's going to be moved around a little bit and this is the one that has the ID that allows us to swap out the theme so I got to make sure that's done correctly yeah it seems to be working better let's go ahead and get that boot Swatch file attached there we go that's what I want right there just make sure it's all in the correct order and notice that now I can switch the theme and change it up so it works all right so like I said I needed to replace those map functionalities with a for Loop that built out a string so I can apply this to the drop- down menus now once I get the drop down information I need to point it somewhere and so like every time they they say I want to have four or five modules it has to write you know that number of input Fields so that I can write what I want to name those modules and so I need to Target for that and that's what I'm doing here data Target and then the video modules the list of input fields for that will go there and here it is for the images and here it is for all the encrypted modules basically I just once they've selected how many they want I need someplace to put those input fields that they said they needed and that's what I'm doing I'm putting it HTML Target is what I like to call it and then each one of these is going to have a spot where I said I want let's say two or three modules for the events and it's like okay it's going to write the fields out and then I can type what I want to call them and and once again this is a fairly simple move I basically will write out the HTML fields that I want the input fields in um in a loop so however many says I WR wrote that many input fields on top of each other and it will be in a string called input HTML which would be what I'll use for the Target and I'll also have to name these appropriately so that they have increments so that when I save them they're unique so it would be like you know Vince module-1 and then module-2 and that way they're all separated out and I have to prepare the form to do this so this is a form that's made on the Fly based on how many um items they'd like to how many modules they'd like to build and then my target gets pointed out right where it belongs there you go and we've got a few one more problem nothing we can't fix there we go now you can tell the CSS is uh off because they're all right next to each other so we just put in the class name form control and We're Off to the Races and then it will look correct and now I can type in as many events as I want and they're all numbered in unique order so that uh when we write down our our task list it'll be prepared with all the items we need to go ahead and put together so we also want to save this information and that way when we start the computer back up it'll load up our options of which invoice you'd like to bring up and start uh dealing with and crunching so here's the data and I'm going to say that I'd like to put this data in local storage so we do a simple set item and we would name it invoices and we'll go ahead and de cleare that up at the top of functionality GF that way we can use it throughout all the other functions it's uh accessible and uh we'll be able to build on to it when we modify it because it's going to be um it's going to have a lot of nested details and based on if it's a upload or a new I'm going to do two different things and depending on what it is which function they want I'm going to find out if they already have this domain and it's something that I'm going be updating or vice versa if it's I don't have this domain so it's something new and so I'm going to find that out in this process here and I'm just checking to see hey is there anything in local storage okay well if so then invoices is whatever is in own local storage so that's a that's a helpful little piece as well okay we're going to use local storage to build out our selection list so we know which invoice we're going to be choosing now these invoices are going to be an object that's going to be stored as a a string with within local storage and that uh that's going to be passed around I'm thinking actually when we build the time clocking in and out for the employee hours we're still going to use the same object that I'm passing around in the invoice thing here because coincidentally the invoice is going to be the master of all of our data for each ticket and it's also going to be collecting hours and many other things so um this is going to be dial in and we'll know everything based on the domain as you can see here what I'm writing and the value will be the number so it'll be the iteration within the object and then we'll be recognizing it as uh by the domain that we've named it by the the client has a domain they'd like to you know call their site and let's go ahead and that'll be the name of the project so let's fill out all the variables all the names the apis all the information you see I've generated it I've saved in local storage and it looks like the first one is saved with no values just the keys and then the second one for some reason has it so it looks like we've got appears to be a memory leak so it's running the function blank with no information saving it and then running it again and so this is common um what you want to do a lot of times is a simple hunt through your code and see why it decided to do it twice it's pretty common and then you know you sniff out saying does this thing even real is there a real value here and if not then you don't want to build it out and then um you also want to find the memory leak and usually a return false will cause the memory leak to stop so let's build out where we want these invoices to point out locally as you can see they weren't showing up on the on the printout just yet so let's go ahead and build those nested arrays into the object and then we'll punch those out in HTML as well the active order is going to be the iteration that will be called within the invoice object and as you can see the invoices would be the active order and then from there we have event modules so we're going to find out that is basically going to be run through a loop and within that list we're going to have the names of the modules which events images videos forms encrypted and crud crud is the API basically and we got to build out those so that uh when it Loops through there's uh fields to F fill in the names and then we also want to show have them show down here when we print it out as you can see it just says there's no content for these modules it's going to the default so I am going to take this information and point it to where I want it to be once I have written out the string of all these fields all the names need to be somewhere they all need to be unique we need to build them out and then we need to put them somewhere so that we can be they can be viewed and so we go through all of these modules to see how many nested loops and how many iterations and then we we do it multiple times over based on how many modules we have have and so here I'm doing the crud modules and crud stands for create read update and delete and I like to call them apis because that's kind of what they are it's not one block of code it's multiple sometimes it's just an update sometimes it's just a post but for the most part I would imagine most the time it's four different calls so an API consists of four on the on the server and four on the client side they're rather large typically and here in this Loop I'm building out the fields that I'd like to have available and so I need to start with an empty string and then once I've gone through the loop that empty string will be something that I can Target and attach somewhere else and here we go with the loop so it says event array and then it has the i++ we all know that it needs to say event arraylength so what I'm going to do just writing this really fast and as you can see I I've got an error here so I'll I'll write these all out and you'll see that I um basically building out the input Fields so that they'll be named correctly and they will fit into my nested object correctly I have to have them iterated so the name will be listed here with the dash and then the number of which module out of the multiple module events will it be and then from there I find the target for the events and I put that string there for all the fields to be uh residing in so I can fill them out and the same goes for all the others so I'm just going to be copying and pasting this and yes I know it has it still needs to be have length in it so but you'll see as I go through the steps of each one of these modules I have to build out and react it's rather uh it's I wouldn't say it's any easier in react mapping something out and then applying it is it's it's the same concept for the most part it's a it's a mapping and for Loop yes it's it's all the same concept so you either do it here and then apply it in at the Target or you build it at the Target through a map whichever way excellent so we're getting along with the forms now make a copy so we can get a little bit further down and do it for the encryption array we'll name it appropriately the naming conventions I'm try to keep as consistent as possible so they don't get confused and we now we're going to do the encryption how many encryption fields are we going to have now um I would I would say you would have a certain Extra Value it's not just an average thing if it's has to go through encryption so these will be a little more expensive I would have a price in mind when you encrypt something and here I'm building out the list for the the orders for the invoices as you can see it's now working and it's we're getting closer as you can see it's not putting out the correct thing it says the string images and so I need to unquote these so they're not strings and represent the variable that we'd like so let's go ahead and un take all the quotes out obviously because otherwi wi we're just hardcoding now in as a string and I will soon notice that the the lengths need to be written let's see how fast it takes me to figure that out there we go now I'm writing in the length make sure I've got them all let's go for another test okay you can see that they're working now but you see it it has done it multiple times again so we have a memory leak a big one you see how many times it went through okay so let's go ahead and fix that how do you stop memory leaks well it's not too difficult a lot of times you just want to hit return false when you just don't want the the JavaScript to read any further you say we're done here we don't need you to we need you to stop now so once it's completed your task you can verify that and then that'll be the time you stop it now also we want this legal text to show up so when someone has decided to print out their their invoice it has the legal text and shows their company name so little bit of just ironing out some details for that okay so I'm going to do a little bit of preparing for validation in this section the export HTML is going to give me a method whether I'm posting or I'm actually doing a an update and you're going to see here that I need to go ahead and do a little bit of validation to make sure things are prepared then I I need to show my legal text which I've actually looks like my my D element is spelled incorrectly so I'm going to have to fix that here in a second but within this export HTML you're going to see that a couple things need to be validated to make sure that we can actually run the functionality first of these things can't run otherwise so here we go I'm going to check to see if uh if the method is default and if it is that means to post so I'll just be adding something to the the invoice already if it's not something like a post so I need to find out what iteration is so I can replace it now we also remember we've got a memory league so let's get forward and thinking on how exactly I'm going to hunt this thing down um I mean so we basically know with this memory leag it's working too much but you can also see with a time stamp that it's done it it's not the same one the time stamps milliseconds are different so it's doing it multiple times over as fast as it can so let's just tell it to stop return false say please don't do that hey these things turn gray so that's too close we go we go ahead and put those in there and then we return false when we're over after we've applied all the functionality and then let's also remember that uh there's a couple of different ways to find out what that method is so what I can do is actually make a for Loop and then find out if that URL is already listed in the URL domain list within that object and if it is I'll I'll realize oh this is an update let's just update that iteration within the for loop as opposed to like anything else I can click the same button and it'll determine hey we we know this domain name and so which case we're just going to overwrite the original and that will determine whether it's a post or an update and uh I play around with it a little bit as you can see here but um that's my main goal is just to figure out the easiest way to make sure that the computer knows what to do and uh I don't erase anything and uh we get everything updated correctly and I also want to do I'm going to just as you can see I'm just doing a few things to see whether what's going to work for me see it's working we're getting those apis and all those modules to show up let's do a post looks like I've got still a couple more issues so we got to make sure that the invoice domain is real because it's if it's not we don't want it to even show up in the work ORD drop down and let's go ahead and put in some dummy information to see where we're standing and where this thing works now I'm just doing some generic $5,000 then you know if they you know I'm just making up numbers I think that would be the low end of a website for the most part these days so let's do I'm going to build out some Carousel modules Recruitment and history two uh Carousel modules for videos with history and perspective videos those are just names for modules like I said these will end up being tasks as well for our development so which case not only we going to have them outright itemized list to be to be paid for but we're itemizing things out so we can build a task workflow for our our development team they're going to follow the same task and as coincidentally our invoice will be applying hours to each ticket and and thus far this is where we stand with our legal and we've stopped all but one leak so it's doing it one more time we don't need it twice we need it once now let's just go ahead and validate what's going on and so I'm going to say if this thing is real if there is really or not not real then we're going to return false and stop the whole thing and I think we just cleared our leak up it's like hey does this thing exist no then we're shutting it down we're not letting that memory leak go forward and then we'll save the items in local storage once we know we've done it correctly do a couple run dry runs to see how our software is working we know that this is what the object is supposed to look like so does it work this part's working yes let's go ahead and run it through to see if we're we're building out one or if it's got a memory leak and it's doing multiple let's just do this one more time you got to make sure that it matches what an email would do and there we go all right it printed it out one time memory leak has been solved and as we can see if we have all the correct stuff in there and we collect it it is building it out correctly okay so let's get rid of this background real quick too I'm going to serve it up and just iron out a few things that I don't want I'd like to have my logo there like uh some of my other applications but I don't this isn't a game so I don't really want to have my um my game background if you know what I'm saying like the card background so this is a something from my shared CSS that I across my all my apps know this shared CSS and I can apply them and they will go immediately and change to what I asked it to so they'll match up with the CSS that they all share and look like a traditional theme that they're all one cohesive piece of work and we'll get back to you when we start working on the hours so we're going to have a bar graph with Apex charts in the next one and so employees can type up how many hours they worked and it will go apply itself per ticket so how many tickets how many hours per ticket we're involved and this work order is now a ailable for the public to use and so you go down and then check out the GitHub account it's hosted for free go generate a couple work orders and get your idea of how you're going to build your business good luck