Excel to JSON Angular App: Adding CSV Delimiter Dialog and a Loading Dialog

hello hello hello everyone how is everyone doing today oh man what a crazy crazy weekend i've had so just i i need to i need to put this out here beginning of the stream so this past uh actually it was yesterday my aunt died of covid19 she was in the hospital on icu on a ventilator for like seven weeks and i just want to stress to everyone please get vaccinated please take care of yourself stay safe wear a mask uh it's it's it's too important right it's really hit close to home for me uh my aunt was not vaccinated uh she lived in florida and she it got her it got her she didn't think it would but it did so i i truly beg everyone to take care of themselves and their families okay i had to get that out of there so i don't have a ton of time today but what i want to start off with is what we're working on in general and in general we're going to be working on the excel to json application that we've been writing and i want to add some more features uh to this app okay so i'm going to go ahead and share my screen here so i'm sure you remember this it's live actually so if you go to uh excel to json.io you can go ahead and check out the working application live but what we want to do is we want to start adding some features to this okay and so let's go to our github repo and let's look at a few issues we have left one issue we have is we need to add a loading screen because you know if i load a file and it is taking a really long time uh there's no like loading indicator to let you know that hey we know we're working on this all right so we have that and then we have the choose your csv delimiter and so right now i can choose like for example i'm going to my desktop because i got a file i could choose a csv file right and it's going to parse all that data and it's going to create json out of it however the problem is is that not every json file i mean excuse me a csv file uses the same delimiter like by default i'm looking at a comma right well we want to be able to change that we need to be able to have the ability to you know provide a different delimiter and so i'm not quite sure which one we should do first mahesh good to see you my friend good to see you thanks for joining the chat there uh so i'm not quite sure which one i'm going to do first should i do the choose delimiter or should i do a loading screen instead at a loading screen i'm not quite sure i'm not quite sure which one we should do first i know i'm running a little late because i had a webinar that i was in and i had to uh leave that webinar to come here so i actually left early to start the stream i don't know take too long getting started but i don't know what do you all think should we do the uh custom delimiter first or css at last should we do a custom delimiter or add the loading screen i only got time for one of them maybe uh maybe the loading screen maybe that's more important right now right because that's kind of annoying you upload a big file right dr cox uh hey brian only chip in in a couple of minutes but we'll watch the vod later ah appreciate it thanks for showing up thanks for saying hi it's greatly appreciated it's good to know i'm not by myself here uh but yeah so i'm not quite sure if we should do the delimiter or the loading screen now if i look i'll go back to our code and uh i believe i already stubbed out a loading screen when we first created the app uh where it's gonna be i think it's on this screen here yeah i kind of stubbed this out it's just not hooked up to anything uh let's you know what let's do the loading screen how about that let's do the loading screen because i think that's the most annoying because for example if i go browse and then this is a big file right here this north wind so if i select this look how long it's taking you're like uh is this working is it broken i don't understand oh there it is okay right so let's let's see if we can fix that problem all right so actually i'm gonna cut this out of here because i don't need it there actually you know what i'm gonna leave that there i'm just gonna comment it out and let's go to our editor oh what's this oh that's a different dialogue okay got another dialogue here uh christian uh hello are you still uh in the xamarin or is that your past i've sent you a message on twitter with a question but now i'm noticing you're releasing mostly other stuff than xamarin uh i didn't get any message on twitter it could be one of those twitter doesn't show you unless you go looking for it but i often i won't answer like if you ask like a ton of questions on twitter i probably won't answer there because that's probably not a good form for that i know i still do xamarin it's just right now i am in the middle of a big project that we've been like writing this past week and a half or two weeks and so we're just kind of improving this project before i move on to the next thing uh but no i still do the xamarin stuff if you want to throw in the gist of your question in the chat maybe i can answer it while i work on this right never know okay so i'm gonna copy that into here i'm gonna say no i don't close this is the loading screen so don't allow that to close don't close on escape and i'm going to call this the loading dialog and i'm going to change this to loading file okay so now the easy wall i don't know if it could be easy or not i think the first thing we have to do is we have to tell the loading dialogue to show so i'm gonna need to grab that so i'm gonna scroll to the top here okay actually i can can't i do this set this dot whoops i didn't mean to do that so i'm going to need a loading dialog in here loading dialog don't need that and this is going to be the igx dialog component right loading dialogue okay let me put it there oh let's see will good to see you thanks for joining um uh can that be made a reusable component it can but i don't need it to be i don't i don't need it's just on this one little screen i'm not worried about it uh so christian says it's a bit longer message but the core of it was around xaml.cs and viewmodel because most of the time samurai cs for me works only it's a link for the view model and i feel it yeah i'm not sure i understand what you're talking about there uh christian it's hard to hardly get the gist from from that uh chat message there you know what if if mvvm isn't for you you don't have to use it my friend like if you're comfortable with code behind just stick to code behind it's it's no big deal right especially if you don't unit tests you know mvvm doesn't really do much for you i don't want to say that but in general i mean one of the main benefits of separation of concerns and that great stuff is testability and if you're not taking advantage of those decouplings then i don't know maybe you don't need to decouple okay so i get the loading dialogue so the first thing i want to do oh i'm not using code behind only the model okay yeah use usb model so i guess on a nit i wonder now i don't use the api for this very much but i'm going to say loading dialog dot open okay so i'm just going to test this out really quick oh i got to save it and we know that this app bundle is so large it takes a little bit to save so my idea is i'm just gonna show the loading dialog right when it opens and then when we load the csv file or we load the excel file we're just gonna we're gonna close the uh the dialog that should work right that's what i'm thinking i think that's all i need actually this should be pretty freaking simple we may be able to do both if that's all i need to do basically i'm going to show the dialogue when it first opens i mean when the first page first loads and then i'm going to hide it the second it uh we load a file oh it can't be that easy it's never that easy it's never that easy now i know you can't see let me raise this up so you can see the uh you can see that there like it's still creating the bundle so i'm waiting for it so christian's talking about uh he thinks mvvm is worse for the optimization of the app but i really wasn't sure about it so i need a quick answer from someone who does xamarin for that it's fine most of the it's it's fine one thing we need to stop doing as developers is worrying about something before it happens right like unless you're noticing uh any type of noticeable performance hit or measurable performance hit then i wouldn't worry about it okay so the idea is actually we're just testing this i'm gonna go here oh i didn't show didn't show oh it's open not a hold on i don't use that component very much i might not be using the right api for that oh let's look overlay dialog window dialogue standard is there like code sample okay there's close it says open see it's never that easy it's never that easy let me go to api i dialog component form close and open close and open i did open so oh wait a minute i wonder i wonder if that's too early i'm trying to remember the angular life cycle this might be too early is it after a nit i think mahesh after that's it after implements uh it's just after view init i was hoping i get some intellisense to add that method thank you there we go i think that's yeah i think that's what we need to do i i think you can even say if it's like has been initialized or something like that but i don't use this method very often let's see if this will work i'll just put it down here christian says okay thank you very much for the tips appreciate your work hope your app works very well by the way if you would be interested i can send a link here on our website for a little project sure share what you got my friend share what you got that's what we're here for we're here for sharing and learning from each other all right still letting this uh yeah i'll bring that up letting this create the application bundles that's the so one thing i don't like about this project because the bundles are so big it takes a long time it takes a long time i'm learning angular learning c sharp and seeing typescript makes understand things a lot faster yeah like i uh i maintain a project i help maintain i should say i help maintain a project called apex charts it's all javascript oh it's so that code base is so painful to navigate because it's just pure javascript and it's so annoying because you can't find anything typescript is so much better okay yeah there it is right there there it is right there now we gotta fix this design right i mean the design kind of blows but uh that's gonna work okay so then [Music] we just say close [Music] and we'll let that build uh actually i copied that from the upload component maybe there's a theme in here or style i should say there is although i don't think that's really gonna matter don't think that's gonna matter much okay this looks pretty good though i don't even know if i need this in here column layout column okay [Music] i'm not going to save this yet because this thing's still doing its little build thing there we go you can see that christian says uh the idea is to have only one app for tracking all your investments side hustles repairing phones anything else because you can buy us assets from any brokers cool sounds like a fun little project okay that's done building so let's go back to uh oh wait a minute this isn't gonna work like i think it is it's gonna work i think it's gonna work here see that happened so fast right let's try the long the big file here yeah see that's this this is good okay uh but here here's the problem create new file creating new is different so let's fix that real quick and we it still looks ugly we have to fix that okay so what do we want to do we're basically saying oh right here i can close it here so what i'm saying here is i'm saying uh you know on init oh wait wait yes no no no don't do that don't do that i can do this i don't even want to open it [Music] if i don't have a file [Music] right and i should know what if there's a file open it right yes that's what we want to do so now i might i might want to move this into a method now since i'm using it more in more than one spot uh i don't know we can leave it like that for now uh benjamin glad to be able to watch you doing your things need to go back to work the.net dev partly because you take care appreciate it thanks for joining for the brief moment thank you everyone for jumping in and saying hi it's greatly appreciated yeah i think that's all we need to do if there's no file don't even show the thing it's it's it's pointless but if there's a file we're gonna pop it open right okay now let's go back to yeah i'm curious what this is supposed to look like i wonder if i could make this like big and just center it somehow i think that would be best and i want that text big too actually can i just copy the styles i have up here i think that's why what i want to do it has settings in the dock well the uh the dialog itself has settings now i'm just [Music] now i'm just doing the uh the content within it right but yeah i know what you're talking about the overlay settings right here like you could choose the animations the direction start point men size [Music] oh successful okay let's check it out all right so now we got to refresh this let's go back okay so if i say create new well that didn't work that didn't work at all that should have worked loading there that worked great new okay why did that work oh don't tell me i didn't save it no i saved it i saved it i'm not opening this anywhere else no new file click i'm passing null all right let's see what happens this is weird i'm not sure why that didn't work and once again we have to wait for the build or that's freaking thing there there we go that should have worked because i'm checking does it have a file it doesn't have a file it should be null it's the same logic here exact same logic interesting does anyone see anything i might be doing wrong anything stands out i mean i'm pretty sure that should not work i'm saying if there is a file that's not null basically if there's a file then show the loading dialog otherwise that code will not invoke there it goes oh worked that time that's weird yeah there's the file loading yeah okay that was really strange maybe it was a caching issue something boom yeah okay cool let's try a different file i think we got it i think that was it oh that's beautiful that's beautiful okay so i can get rid of that console.log that works now i don't know what we did before i don't know uh i don't know why didn't work the first time but it looks like we have that working uh now i just gotta figure out this now i'm gonna i'm gonna take the same class as the dialog window i'm not sure what i'm doing here h5 avatar h oh yeah i think i'm gonna change that to an h5 as well all right let's make this a little bigger okay i'm coming here i don't need this okay now how do i make this icon bigger so i it's a igs icon let's go to the docs here not just filter for icon boom icon okay yup got that color icon size oh okay i gotta add a uh gotta add a size to it i can do that we'll call this uh loading dash icon and then we'll go to our editor oh here's his icon i'ma change it to loading dash icon save it and let's see what we get generating the application now i'm kind of concerned that this is not going to be centered that's my only uh my only thing oh they had the icon at 36 here i had 56 i don't know we'll see which one looks better we'll let this finish building brought the chips and dip okay done building i think it's done building says it's done building no it's not it played a joke on me see that still generating oh this is the worst part it's freaking taking forever other than that i think we'll i think this is it once this is done this it's good like you got to be solid i'm just gonna wait for this to build check it out see what it looks like i'm not 100 sure how we're gonna get that centered uh that's the worst part i hate css that's why i like the app builder for those of you who may not have seen the uh the first you know first uh video in this series the first stream we actually use an app called the uh ignite ui app builder that generated this entire application for us oh my gosh it's still building look oh this is painful i'm glad you brought those chips and dip i have style in chrome yeah probably have to do that while this is spilling up brian what are your thoughts on angular versus a xamarin or traditional desktop development any pros and cons on angular uh so you know i am a hardcore desktop developer like i've been developing desktop apps since like 2008 if i remember correctly 2006 or eight i know somewhere a long time ago long time ago uh and the more i spend i'll just say web in general angular is just a framework a web framework uh but i like to react to actually react's grown on me i used to really hate react but then i got used to it like okay it's not so bad uh i really like how flexible and dynamic web technologies are i hate how complicated the tool chain is though right the tool chain for web sucks like it's a nightmare like besides your main framework you use oh you can use a reaction you can use angular we get past that oh what about webpack well how do you do webpack oh then you have these docker containers and you have these different database types and you have this node stuff it's like the tool chain in web sucks so bad it's so confusing oh better hit a command line for this oh open a command line for that it drives me nuts right uh but i like how flexible it is for sure the flexibility of web is pretty amazing okay okay this looks good this looks good i just need to center it just need to cinder it so to do that let's let's not close it let's comment that out so we don't close it uh but yeah it's really all about choosing the the right tool for the job the more i use web the more i see that there are a lot of of internal applications that can be web-based applications uh there's no reason for them to be desktop apps like really there's not but then again there's a lot of apps for the desktop that i don't really see going to web or should be in the web uh so it's really pick the right tool for the job but i i like how dynamic and fluid the web is and how you can you know like for example i like being able to generate dynamic objects on the fly i can do it in c sharp it's just a lot more code to build a dynamic uh object and see like a c sharp object than it is say uh you know a dynamic javascript object okay like for example if i wanted to actually i should do a video on this i can build a dynamic object in c sharp with expando object converting it to a dictionary and adding properties to it i could then access those properties in code and set the values and stuff but that's a pain in the butt right i should do a video on that if you've never created a dynamic c-sharp object with adding properties and events to have an actual object you're working with uh i should do a video on that but in in javascript i could just create a dynamic object on the fly it's pretty freaking easy okay settings ignite ui causing long build times uh yes chris it is specifically the excel spreadsheet uh because that is a mat this this expos excel spreadsheet is a massive component because it's it's excel and we just it's an angular component okay uh mahesh what reason to choose it if it should be a desktop app not a web that's that's hard to say man there's a lot that goes into it there's a lot that goes into that it's not you can't make a common you know blanket statement to say when this do this it's it's really uh as you see fit right okay this is what i want maybe that's what no what do i should i try to center the whole thing i'm not sure let me try okay that didn't do it i didn't do it maybe i should try to do the whole thing here because that's centered okay flex direction no flex line items align items oh i didn't know i could scroll and see it happen getting there getting there hold on we're gonna find it here baby uh sweet slabs i'm there with you during hiring when constantly hearing the buzzwords it's easier for us to find react angular frankly doing medical robotics and mobile dev we target speed and security yeah exactly exactly it just depends it really depends chris makes sense man i really enjoy your pluralsight courses in the prison library such an awesome library keep up the good work hey man hey chris i appreciate it my friend once i get back to uh that space i'll be doing more.net videos okay maybe like this is okay this okay that didn't work none of that was centered so i'm gonna escape escape maybe it's this one come on there's gotta be a way okay nope that's not it there's got to be a way to center this what if i start with just the flex here what was that what was that what was that nope nope [Music] dang it ah [Music] thank you there we go okay that was a column two layout okay that's what i need right there that's what i need right there align items center thank you my friend i think that goes where here and then go here column two column layout i should probably create a new style for this right i should probably i should probably do that because i think it's on this one right here that i'm trying to align center or i could just do inline i'll just do it in line just do a line and then i'll probably this is a little small for me so i'm gonna change that to an h4 make it a little bigger yeah my head css is trial and error no matter how many times i try all right let's try that i'm gonna make that text just a little bigger i did the same thing oh that's title one that's why it didn't look as big what was title one color height min okay that's probably why it was a little bigger let that build and maybe we can call this good i can't forget to uncomment that but we want to test it real quick just to make sure it looks good and then we can call that one dunzo oh i just wish it didn't take so long to build these freaking bundles i'm gonna have to have me a little think of chips and dip next to me you guys can watch me eat while this builds but yeah that uh that excel component is up it's like like five megabytes by itself or something like that oh you can see right here like the main javascript is six megabytes with that excel spreadsheet in there all right so let's go actually that's not having really any impact on that at all is it oh you know what it is it's that class that's on there that's what it was okay so i'm gonna turn it back to h5 what if i just get rid of that class or should i do the title class one that's what the heck the one that's up here we're using the same title one there h5 because i want to kind of keep the same styles and text throughout right so let's let's try that what is size of the prod build hmm actually i don't know the size of the prod build [Music] that's a great question i can tell you it doesn't take as long for the prod build for some reason the prod build seems to go faster we can replace the class name in chrome dev it would pick up yeah i need to learn i just need to fix the way my brain works because remember i am a net c sharp desktop dev so i'm used to like making a change hitting f5 making a change hitting f5 i gotta you know it's hard to change those habits over the past 20 years of coding a certain way and then you start doing web it's like oh wait no i got this whole tool here i can come in here and change the class right i don't even know if that worked or not oh there we go yeah that did work uh wouldn't mind wouldn't mind having a little little margin around that right maybe of like five pixels no i'm gonna say margin.top something like that it looks a little better huh yeah i think that i think that'd be good so if we add a margin.top of 15 to the icon then that should what about margin bottom minus 10 picks what's up what do you think about that well maybe 10. i make it look a little better that might make a little better [Music] all right i think that might be good i think we can make those small changes add a little top margin of 15 to the icon and then a negative 10 to the bottom just to kind of bring that because it kind of looks just a little weird just a it's just a tad [Music] okay let's do that margin top 15. [Music] margin top 15 picks margin has bottom negative 10 picks oh i set 15 by type 10. yeah i think negative 10 negative 10. okay and we have to go here and uncomment that so it actually works save wait for the compile and then we have a loading screen yes [Music] see like i said we actually implementing the loading screen was pretty easy but we spent the last you know 20 minutes of it messing with the styling and get it to work right now granted if i uh if i could learn to actually use the chrome dev tools to play around it wouldn't be so back and forth but i'm working on it i'm working on it [Music] hold on lots of messages that i can ignore okay come on this should be it this should be the last one this is gonna look great it's gonna be amazing [Music] and we can check this in actually while that's loading or while that's building i'm gonna go ahead and open up my get crack lacking excel to json right there right [Music] hurry up come on there we go alrighty moment of truth i'm gonna close that let's upload a big file boom loading file oh i love it okay what about a small file okay about a medium sized file awesome okay we got it let's go ahead and stage our changes uh added loading dialogue push that go to github add a loading screen [Music] done sweet okay you know what i still man i still got time i went quick uh should we try to implement the csv chooser i think i think we might be able to do that i think we can do that i hope we can do that okay let's work on that close the editor let's go to the upload component okay we're going to uncomment this but this is going to be called uh delimiter dialogue uh i don't need an icon what do i need to do here that's going to be false false i wonder if there is a good example that i could just kind of copy and paste let's see standard custom dialogue what's custom dialogue yeah like an okay cancel type thing oh there's the left button there's a right button right button select right button okay okay okay okay let's try okay let's try this uh i'm going to get rid of all this and let's add a h5 right choose delimiter okay choose delimiter uh this had a [Music] it had a right button right button label okay okay delimiter dialogue probably gonna need yeah we're gonna need access to that we're gonna need access to that so i'm a copy and paster i'm a copying pastor i have no shame we will add this we'll add that delimiter dialog i just want to make sure i have it spelt the same okay so now what happens is we want to show the dialogue we want to show the dialogue when we pick a csv file [Music] so would it be here file input changed navigate to editor on drop navigate no no because i may be dropping so it has to be here okay so here is c csv if it is show the dialog right well luckily i have code that i've already written and i get okay so i can do this can do that and why is that no it's not null that will not be null okay so if if it's a csv then we want to show the dialog [Music] delimiter dialog telemetry dialogue dot show whoa i meant this dot dell amateur dialogue that show well why does that have yes it does it sure does we just used it oh open thanks my friends are on top of it okay so all we want to do is we wanna we wanna then open it and for now i'm gonna hmm i don't want it navigating anywhere just yet so i'm gonna get rid of that don't want it navigating yeah in prison we have show dialogue uh so i want to see if a csv so this actually i may i may need to change my logic a little bit but let's just test the logic let's let's just test this out because what i want to do is i want to say hey is this a csv if it is we're going to pop up our delimiter dialog we're going to choose a delimiter that will will actually have some choices in there and then it will go to the next uh to the next page prism for the win okay i'm yeah that's what i'm thinking we may have to split this out to another method but we'll just let's just go with it for now and then we'll we'll go from here but i want to test okay opening the dialog and then you know what we're gonna have to do on right button select uh on the uh delimiter selected right something like that i think we're gonna have to have something like that i have a feeling i have a feeling we're gonna need something like that what the file is something like northwind.data.csv well then i don't know i'll worry about that later mahesh why are you trying to make things complicated don't name your files like that okay so let's go ahead we're gonna browse csv we show the dialogue okay perfect okay that works so that that worked so for sure we're going to have to uh telemetry dialog dot close so we'll have to close it and we'll also have to choose our delimiter right i cannot freaking type so we'll definitely have to do that yeah this is gonna have to go in a different method this is definitely gonna have to go uh go somewhere else but let's just let's just keep going so the next thing i wanna do so i want to add i want to add a select i think we have one of those right yeah uh input properties i just want a simple no don't need that don't need a header and footer that's a complex you know this is yeah that would work just fine if i just had a simple simple select like that something like this okay i'm not gonna worry about the overlay settings just yet uh igx select okay okay so when you do some work here oh no not module component i mean not component module okay so we have a select uh not sure you know i don't don't think i need that label so let's go into our editor component let's create no not editor not module upload uh let's create let's create a little variable here let's get a whole little property delimiter delimiters uh delimiter menu items i don't know sure so this can be this can be a string array uh i can't spell i wonder if i should have a business object to represent these like just an interface export interface delimiter right and it could have a name and a symbol something like that right and then this would actually be delimiter uh new delimiter all right no i don't need to do that uh simple something like that i can just fake this i don't know what delimiters we're gonna have you know semicolon uh you know what doesn't excel doesn't excel have some stuff like data from csv i'm gonna pick my csv here what is excel support we have comma equal size semicolon space tab colon just take a screenshot of that and all i did was i pasted it here so i can refer to it so i'm going to drag it over all right so we got semicolon colon whoops uh space tab equal sign i don't know if i want to do all those but colin semicolon comma you know let's start with that and i'm gonna make it alphabetical okay something like that no it doesn't it doesn't really need an id my hash doesn't doesn't need an id so i'm thinking something like this uh we're probably gonna need something to store the selected [Music] right the selected delimiter and the limiter menu items index of zero one i want comma to be default so how do i find how do i bind that select select item select like i'm sure [Music] ah ng model that's how i do it [Music] ng model [Music] selected delimiter uh okay so we got that now i don't know what this is gonna look like it's probably gonna look like crap but i just wanna just wanna get it to show up so igx selects we're going to go to select the delimiter or select the delimiter it's going to be the first index of our list colon semicolon comma [Music] it's probably good for now [Music] so once i get that so here here we will have our delimiter we'll have it right here on delimiter selected uh so it's actually use our delimiter [Music] that's what that's going to be so we need somewhere to store that we're going to need somewhere to store that [Music] i'll just use my existing i'll just use this right there right and we'll default it to that okay seuss labs uh got to drop out for a meeting great stuff man uh daniel sessions are great for world app dev troubleshooting hope your wife did great in her competition take care thank you my friend thank you damian thanks for joining great to see you as always i will see you in the next one appreciate you okay so we'll store that off there that means here we can set this no we can set yeah this dot file storage dot delimiter symbol equals this dot selected delimiter dot symbol right so we'll set the symbol hmm let's see what we have so far choose the limit perfect look at that i need to do some like you know styling and stuff but this looks pretty good and then it's going to go do what it's got to do okay okay not bad not bad at all so let's go back to our docs here let's go to the dialogue again because i'm curious click [Music] curious for what let's go to api let's take a look it's right button select opened well we have a closed i mean i can handle the closed event right that might be better to handle the closed so just for fun let's go uh on closed equals uh [Music] maybe that instead you know maybe i don't need that mesh are these controls free to use for local development uh yeah for local development they sure are they're on npm and you'll just get a uh you'll just get a uh whatchamacallit like a little watermark in the bottom right hand corners uh for the trials but yeah you can develop with these all you want and here's a little secret we haven't gotten around we haven't gotten around to oh yeah i broke that never mind let's do this haven't gotten around to adding the watermark to the spreadsheet just throw a little hint out there just want to throw that out there i'm not sure i'm not sure if i want to handle the on close instead or just the right button select but we'll go with right button select for now so once we select delimiter we're going to set it we want to close the dialog and then we want to navigate to the editor right but we have two places we have a drop and we have a file so i think we're gonna have to add another method here i think we're gonna have to do something like this a candle file right oh it's gonna have to be null too and then this code will go into there is that right oh wait wait wait wait i think i got it no we don't need that i think i can just say else and then here i don't want that to get too confusing but i think that's what we can do basically i'm gonna navigate to the editor but first we're gonna say hey is this a csv file oh okay well first i need a delimiter so we're gonna open this dialog and in that case we're gonna open the dialog and then once it closes will come in here otherwise you're just gonna go right to the editor that makes sense i think that works i'm i'm not super happy with that so maybe i do need the handle file maybe i do need the handle file right i think i need i think i need handle file i think i need to move this into there and actually this is all data-bound yeah i okay this is what i'm thinking this is kind of what i'm thinking oh crap maybe that won't work because i still need the file but once i'm out of this i don't have a file anymore choo think think think think how do we want to do this how do we want to do this i bring the file in i say hey is it a csv file if it is i want to open up the dialog and then when that closes we're going to set the delimiter close the dialog and then navigate [Music] but that's not going to work because i won't because i want to call this method but i won't have that file so i can't i can't do it that way so i'm gonna have a little duplicated code god i hate duplicating code okay well this gets pulled out that gets there i'm gonna handle file handle file handle file so now we're gonna handle the file pass in the file okay is is it a csv yeah okay we're gonna open this otherwise we're gonna navigate to the editor but in this case we need to set the file either way we need to set the file then here navigate to editor after we close [Music] i think i think this is what we need i think this is what we need does that look right to everybody i don't know how many of you have lost already handle file bring the file we're going to set the file in our file storage [Music] is it a csv file i'll probably need to pull this out into like a little utility if it's a csv we want to open up the delimiter dialog otherwise we could just navigate to the editor okay if we open the dialog i'm gonna open the dialog once it closes we're gonna pick our symbol set the delimiter symbol close it navigate to the editor okay that makes sense to me then the next step is this right we need to pass our delimiter we need to pass the limiter to the uh to the method where we're using our delimiter that's what we're splitting on [Music] okay let's see what we have so far csv choose it i want a semicolon okay navigates what happens if i pick a different say like a sample no dialogue it just goes to the load that's that would work that would work okay so now now now now now now now bash default parameter required i'm not sure what you're asking i'm gonna force that to be provided so i need to go to my editor here i should have a build error right there boom fixed just like that [Music] save that [Music] i think that i'll do it [Music] [Music] yeah i'm i'm pretty sure that's gonna do it i'm not sure i'm extremely happy with i i feel like i can improve our logic a little bit but it's just my brain is just not clear today it's just not i'm a little foggy today [Music] i just feel like this can be improved for some reason now i definitely need to pull this out into its own class this is just here temporarily uh but still i feel like this could have been improved but maybe not [Music] i don't like having the clothes here [Music] i mean i could do something like this [Music] on closed on closer on closed right something like that i feel like i want to do this instead honestly [Music] [Music] this is what i'm feeling this is what i'm feeling [Music] [Music] right this is what i'm i'm i'm feeling this a little better i mean eliminates one line of code here but so we get the file via drag and drop or button click handle the file we set the file storage we say hey is this a csv file oh and mahesh to answer your question with your northwind.data.csv file it doesn't matter because the pop is going to take the last element of the array so it doesn't matter you can have as many dots in the name you want it's going to take the last one which is going to be the csv we're expecting now in a perfect world we might want to go back and add some error handling so if they try to upload something that's not csv i mean we try to handle that we try to handle that in the ui actually by limiting what they can select uh where did i do that oh right here accept only csv and xlsx but we don't have any code uh guard statements about that so is it a csv yes oh well let's open up the dialogue uh the the delimiter dialog otherwise just navigate to the editor then you open it up then on close we're going to set the delimiter symbol to the selected delimiter symbol and then we navigate because then we have everything we need for the next for the next view so i should be able to select csv get our dialog hit okay and it goes i'm just curious i think i'm gonna change this to on close because i didn't i didn't really like that uh that short delay when i hit the ok button right i didn't like that visual look when i hit the ok button then it then it like fully closed and then navigated i want to hit the ok button and just a navigate outside my bedroom window and the moonlight spread its shadow across my ceiling sometimes when i woke up okay i think this is gonna work i think this uh we've passed in our deliberate symbol here we updated there pass it here here here okay that is good we're gonna default default it to a comma i think we're i think we're good i hear some background meeting going on oh did i get a notification oh that's my lunch notification yeah if i don't like i i get so many freaking meeting requests and like i'm in so many different community things and it's like i have to put my lunch hour on my calendar or i won't get to eat lunch so i actually have lunch stubbed out on my calendar every day okay so let's go ahead we're going to say csv oh that's better i like that better right like okay i'm gonna pick it now this should break if i say semicolon boom that should totally break and it did but it proved that it worked okay perfect perfect perfect perfect okay uh link the file created pick up your phone okay i need to get some of that spacing let me get some of that spacing in there oh yeah we're killing it this is much better this is much better okay let's go here so i think we're we're good there i think i'm happy with this i think i'm happy with that i could put space but no i'm not gonna put space i'm not gonna put space [Music] okay yeah i think i'm happy with this now let's just get this looking right i'm going to go to our editor and i'm going to copy this this class on this div right uh this div and then i'm gonna copy title one so i think that's still in the sea i didn't i didn't take that out of the css nope i didn't okay so that's there so i'm gonna save that and i'm gonna see if i can just get a little bit of uh some better spacing and alignment styling [Music] i think we'll be okay i won't need to align it center actually i don't even know if i need that div in here i i think i accidentally have an extra div that i don't need i'm scared to remove it and this is off there [Music] yeah put a semicolon okay i think uh i think once this is wrapped up man we'll be good to go i think we'll be good add cancel button to select delimiter dialog box why once you choose your file like you should continue through the process i don't wanna i don't wanna have two different workflows one for excel and one for csv because what i mean by that is if i select an excel file it goes straight to it you can't cancel it but if i go ahead and select my csv oh i don't want it centered but that looks good uh but i don't want to be able to cancel that and stop uploading your csv file okay so let me go back to that i don't know why that was why that's centered oh because text align center oh you know that didn't work how do i know oh my gosh now [Music] uh okay line [Music] [Music] oh that's not working maybe i need to be on the upper div [Music] oh which said i mean do that flex come on there we go that's what i need right there that's what i need i need flex align items flex start on the upper div okay so here oops wrong key boom all right i think we got it i think i'm good i think this is gonna wrap it up man let's i'm hoping i'm hoping let's see what we got then we can close this issue hehehe man we are just slowly making this better aren't we let's wait for this to finish building and i think oh that's that's editor i don't care about editor [Music] oh oh before i oh i i'm not quite done i gotta pull out this uh this class you always do it right now business business oh it's done okay let's check this out real quick [Music] yeah it looks good i like that i like that okay perfect hold on hold on let's try the uh good old drag and drop first can't call it good yet right drag and drop [Music] yep works the same beautiful and we didn't break our loading nope our loading uh screen looks good boom beautiful all right all right all right so let's go ahead and move this out of here into our delimiter.ts file then we have to add [Music] our delimiter [Music] and i think that's all the cleanup we needed to do uh well hold on i see something i want to fix on delimiter dialog close okay so that i think uh looks pretty good actually not too shabby not too shabby still we should probably get rid of this div like for real we don't need that extra div in there right don't need an extra div didn't provide us anything it's just an empty empty holder uh i'm gonna cancel now i'm gonna start it back up because i hit save like five times and so it's gonna have to freaking go through that five times i just it's better just to cancel it and wait top 10 tv what's up waving back at you okay so we pull that out that's the only place we use that who was calling me okay no one important okay oh you know what i've i forgot to do something when i started my stream i hope it didn't mess up i've been streaming this whole time usually when i start my stream i increase the font size of everything so now i'm worried this whole time you've been reading little tiny fonts oh i'm so sorry about that how's the font size for everybody is that readable i cannot believe i forgot to do that cannot believe it if you're curious what the difference would be this is usually what i do so watch the screen you see that that's what i usually do oh my gosh so sorry everybody i did not realize my font was so small that's what happens when i'm in a hurry i was jumping out of that webinar i was in trying to get everything set up real quick running behind like i said my brain's just in a fog today uh i mean i don't know how many of you were were with me uh at the very beginning but i mentioned that my my aunt died yesterday of coven 19. so my brain is just kind of scrambled today trying to focus you know hard hard to focus got to get some cobwebs out of my head okay come on it's taking forever but this is our i think this is our last little test and so if this works what i'm going to do is i'll build the uh well i'll check it in i'll close the github item and then i will build the what you might call it the docker container test the docker container and then if it works at docker it's gonna work when i push it up to the server and actually i'm gonna get my docker uh running here we go here we go okay let's try it out yup looks good comma semicolon okay perfect let's upload a big file oh yeah see removing that div didn't do didn't do any harm at all boom man this is looking like a professional uh like a professional app huh we're making good progress i like it okay so we don't need that don't need that i think we're done there so i'm gonna call this good so let's go ahead and i'm gonna cancel that [Music] let's stage our changes added support to choose the limiter okay push got it done close okay got one more open i hope you're going to answer the tech question soon i'll get there man i've just been uh just been busy just been busy at least i'm still finding time to stream right i'm i'm doing something i'm doing something okay so got that uh i got that so now i can i can close this i'm going to open up my docker okay now i'm gonna go ahead right click build image latest and let's uh let's watch this happen so now docker is gonna go ahead and it's gonna rebuild do a prod build of everything oh looks like i need to update my mpm script to use uh configuration production instead of dash prod we'll let that build out yeah uh ali i i think the i think the next video i do will be on a dialogue creating dialogues in mvvm because it's so easy i just want to show people because once people see it like oh yeah it makes total sense but a lot of people struggle with showing uh showing a dialogue d d a d couple dialogue from a view model right but i will uh show everyone how to do that okay here's docker open up my docker desktop so here's my docker desktop there's my image there i'm gonna wait for it to be updated so when this builds when this finish builds building right here it will update that image and then we'll test the image locally and it should work just fine and once we prove that it works just fine i will push it to production and it'd be yeah it'd be done and then i'll just wait for some more feedback i mean there's one more issue there's one more issue here called uh csv just parse wrong and yeah right now we're doing very basic csv parsing where we're not catching or looking for commas within the content right so if there's a comma in the content it's gonna it's not gonna split right so i mean that is something that needs to be handled but honestly i bet there is a csv parser open source npm package i can use instead instead of doing it myself i bet i can just call into that library and it will handle all that for me i can almost guarantee you that's out there so maybe i'll just research finding that and then when i find that i'll switch from using my custom logic to using that that library i'm sure it exists it's got to exist it's got to if it doesn't i guess it's something else we have to write [Music] okay so yeah see this is still taking a while actually to build the uh to build the production build i thought the production build went faster but i guess i guess it doesn't i guess it's the same we're at 183 seconds for the production build so far but it should i haven't made any changes to the server so it should at least not have to rebuild the server portion because it caches these things or it should cache them for my understanding docker will cache the projects that have already been built and haven't had changes but we'll see we'll see what happens right we'll see what happens oh dima subscribe thank you very much i appreciate that for some reason i didn't hear the the music for that that's weird but i saw the little animation pop up okay i i think that's good i think it's done it's done now so let's bring this over let's go ahead and uh let's run this i'm gonna open this up on my port 8080 let's open this up and let's test it so let's browse for north wind there's our loading dialogue yep see now it's going through the server so let's get our link that's good that works we didn't break that okay let's go ahead let's create a new file oh we crawl we do have an issue interesting i'm glad we tested that though right uh but let's look at this looks good okay oh i know what the issue is i know what the issue is yeah it just hit me uh what's the production build size i have no idea well will docker tell me what the build size is let me stop that i actually know what the problem is oh i closed the yeah i closed it so when we were checking the file extension i didn't check if we had a file right so we kind of have to check if we have a file because if you hit new we're passing in null because that lets me know it's a it's a new file we don't have anything to work with right so we need to first check so let's do this okay and then we can say if right i shouldn't have to do that twice as mad at me this is not going to be null if it's in here it's not null string undefined is not assignable to type string type undefined but this will not be undefined see i've already done the null check here so i don't need that i really wish i didn't have to do that but that's that was the fix right there because this could be null and we need to set it to null that's okay right we're expecting null but we can't we can't check the file actually let's let's do this instead i don't want to have this let like i can do i can do this right const file extension equals right i can do that that's better i like that better we're doing that we're saying the same thing we're just saying hey if if the file is not null like if there's a file then get the name pop it off let me know what it is otherwise we're going to assume it's a slsx okay so instead of just building this testing it i'm gonna have uh i'm gonna rebuild the docker file because it's gotta build it anyways and then we'll test it we'll test it via docker but that should be that should be the fix right there yeah that's got to be the fix because we were we were checking we were calling a name property off of a null object so now first we say hey do we have a file yeah okay we'll use that otherwise xlsx baby yeah oh i can't believe i didn't catch that the first time oh well it is what it is right all right now it's gonna build this whole thing you know i'm i'm not sure if the uh if this build will tell me what the site final size was it's gonna be big though it's probably five megabytes at least at least five megabytes because the spreadsheet component is a huge component but that's okay all right let me go back did you do an end-to-end messaging encryption before nope never had to never had to do that [Music] okay i do have to go back no not there i got to go back to my to my get crackalackin right there yeah if file name then use the file name split it off otherwise it's xlsx actually i'm gonna wait i'ma wait until i confirm it's working right don't make that mistake of checking something in without confirming that it works [Music] i forgot how long i didn't even look how long it took last time how many seconds [Music] but see how long it spins just on the spreadsheet part compiling the spreadsheet come on almost there i got so close so close yeah this is the first time i've ever i don't know if you guys remember when i did the docker uh series of the docker video uh building this is my first time i was exposed to docker oh let's see does it tell me no it doesn't tell me the size no that kind of sucks i wish it did tell me the size if you use docker and you uh have some type of command line trick to know the size please share that'd be a nice to know all right so now okay we're getting all this i'm going to remove that move that this is what we're playing with right here all right so let's uh let's test this again shall we boom [Music] there we go now let's test our csv comma looks good to me now let's test our north wind big file north wind yep loading files taking a long time loading file boom there you go get link let's test everything make sure that works what if i pick uh employees i should get a different link okay now if i go back to orders and i change this i don't know i need to change something on here ah get link this should be the same one i should just refresh and that should change to aaa yep perfect okay it looks like we are good to go uh oh the one thing we didn't test hold on yep okay that works too perfect perfect perfect perfect so let me stop that go to my image i'm going to push that to my hub oh crap i just remembered i gotta take my kids to a dentist appointment today oh that means i gotta call their schools and tell them i'm gonna come pick them up oh it's so annoying well i have time to eat lunch now i don't know if i will [Music] okay oh perfect done all right we did it we did it i thank you all for helping me implement those two features uh excel to json is basically done i'm gonna have to have a find like a a new project to start working on when i stream now uh hmm i'll have to think about that but i just realized i do have to take my kids to a disappointment so i can't chat any longer i want to thank you all for joining me today i appreciate you all i know that you can uh you know you can choose to spend your time doing anything else yet you chose to spend it with me and i highly appreciate you all i love you all and i will see you all next time have a good one everyone you

Channel: Brian Lagunas

Views: 350

Rating: 5 out of 5

Keywords: excel to json, convert excel to json, csv to json, convert csv to json, export excel to json, convert csv to json angular, convert excel to json angular, convert excel to json in javascript, convert csv to json in javascript, excel to json javascript code, parse csv to json, parse excel to json, angular excel to json, angular csv to json, asp.net web api, json file download, blob javascript download file, download file using javascript, download json file

Id: zNH0BFMHCss

Length: 122min 10sec (7330 seconds)

Published: Tue Sep 28 2021