Burke Learns Blazor - Drag and Drop and DOM events!

[Music] m [Music] m [Music] and hello what's up everybody happy Friday Burke happy Friday indeed so wow we are doing some cool stuff today I'm quite excited about we got we got some code help from The Steve Sanderson yeah we did I mean this exciting and you've been doing nothing but Blazer lately you've been C we talked about this I'm probably gonna be out of a job here pretty soon I'm not doing my my actual job anymore I only do this yeah this is great it's not good I have there's actual things I need to do this is not actually a job this is like a this is like a long running like drama Brooks descent into pretty soon you're just G to get the Blazer Lego logo like tattooed on your head or something I know it's getting worse and worse I I really like so I like the ergonomics of Blazer a lot but I don't like it when I have to interact with the page yeah I get it I yeah because it it wants to own the Dom right so it wants exactly right you cannot touch it which is what we're going to discover in today and I'm just pulling up I'm going to cheat because there's no way I'm gonna remember how I did this uh so I'm just pulling up some uh so and you've been working on this for a while and you like find so then Steve like helped out with like why aren't these Dom events firing and some stuff right yeah I got it mostly working but then some strange Behavior which Steve called Dom corruption which chat essentially what John just said which is that Blazer owns the Dom okay so if you manipulate the Dom in the browser which is what you're doing when you drag and drop things around and Blazer doesn't know about it then you have changed the state in the browser from the state that's internal to Blazer and it does not and you'll get just wonky results I I I forget what they call them in the docs but it specifically says don't do this and that's exactly what happened to me you did what it said not to do I did what it said not to do but I thought Blazer would just render the Dum I thought it would just render that fragment if I made the change to the model but it does but and it does but it doesn't render it it doesn't does render it with your changes it overr it doesn't render from scratch like it renders the portion that changed but not the whole thing which I guess makes sense right you wouldn't want blazer just like blowing away entire components of recre them every time there's a change that would make your app rather slow slow yeah so yeah I'm just trying to get my here awesome we're gon Kevin Blazer Noob I think so different shows in the past have been at different states of preparedness and everything we do flash this we're we're this is live coding however I think this is something where people will actually learn some stuff and this is some actual kind of work code we're getting to which is kind of nice yeah I didn't know anything about Blazer like in the summer when we started this and now I know a little bit not very much um so we are working on uh the URL list we are converting a a previous site that that you and cile built using um view Azure storage um uh Azure front door some other stuff looks like this you can log in I use it a ton I love this site I have so many different um URLs so it works it's worked in the past with Twitter now known as X and um here's all my like you can see all my links I've been early adopter going nuts I use it all the time um so then we talked about this and we're like hey we need to update this like to work with more than just X we also work with you know maybe like GitHub or Facebook or other login stuff and then um update it to new technology so we're using Blazer and Azure static web apps and all the new stuff all the new stuff that's right yeah and you know we actually could John we could have just added those login providers to the existing app we could problem was you didn't understand the API because you didn't write it yeah and well and we were in a weird State too because some some of the the the actual code in production didn't align to what was in GitHub yeah that was it and and there was also some stuff where it was code that was written four or five years ago before static web app shipped as a product and so there that's the main yeah that's the main thing is that the architecture that sits behind this website is so overly complex for what it is right it's just a list that's all it is and so that's always really bothered me and so more than anything I just want to update it to that new architecture which is static it's a Le y I'm what's that it's a chance to learn some stuff in public other people learn some stuff they share some they help teach us we help we share our what we're learning yeah it's a lot of fun we we like it okay Friday's the best day all right so so we're not doing Inception here so I sharing my screen if you want to throw that up there and I figure we'll start with the inate so I can show people what we're going to do where we're going to end up and then we'll just try to end up there so pop this in the corner and I know I'm using a light theme I've been having some uh like dizziness and disorientation lately and it's my eyes are really struggling so I've switched to a light theme to try to help with that you know I mean they say you know people like there's all this kind of back and forth I I kind of got way into the dark theme's the best theme but but White theme is supposed to be the most ergonomic and and they do tell us to use light theme for presenting is kind of a best practice because it's more it is more legible yes I don't think it's better for your eyes but it's crisper I can see it better so uh yeah all right so let's take a look at like we're GNA go to the end State and work backwards so we can see what's I so this is the one we put together for donet conf right we did one for uh packing light um that was fun all right so let's go here this is the the Blazer version and it's this is just the front end um but let's add a URL here I can't wait till we get that open graph stuff in that really makes it look cool yeah all right so here what we're going to do is where're we've made this so that we can reorder these like this right and then when we post this um this won't work but what if we publish it what we should see here is an order that matches this right so 4 2 13 4213 that's what we see okay um yeah so that's all we're doing uh and the error here is because the the fetch the API request failed okay okay yeah that's it why did the API request fail is that something we need to because the API is not running oh okay yeah we're just doing front end stuff again today just Blazer stuff today all right so this is Steve's branch and we're gonna merge Steve's Branch so he gets the credit for the work that he did here but we're gonna go back to Maine and start from where we were last week and then work on top of that okay I may need more coffee you know I you're welcome you're welcome to run and grab coffee if you need appreciate that you're always so supportive John most supportive person I you're doing all coding today so okay so let's create a new branch and let's call it can you put an emoji you know will this work I don't know apparently put a trash can it's disposable all right certainly that's like an antib right I mean I you could put in commit yeah chat put emojis in your com in your branch names be funny okay so let's start here with our um okay so let's go to the Internet we need something that will let us sort the list now yes chat HTML 5 does have a native drag and drop but it is as Steve put it he said it is woefully inadequate and the reason for that is it is is not really supported across browsers doesn't work on iOS at all right and if it doesn't work on iOS then it doesn't work because that's where we live it meaning probably meaning it doesn't work on Safari yes exactly uh and so and also like it's so limited in terms of the control you have over it like you can't style the drag uh what do they call that proxy whatever that thing's called you can't style that thing at all and so and so we're going to use a library called sortable JS instead we do this with JavaScript so we've got what is he chatting about so we're chatting about setting up drag and drop in the app and making it so we can drag and drop things back and forth in a list and we're figuring out how to make that work in Blazer hey Sean good to see you and you can see here this is this is what we're going to do right this is the sortable library this really nice really nice animation it actually does use HTML 5 Dragon drop where it can and it will fall back where it cannot I I actually when when we first started this project I was like oh how hard can it be and I went and spent some time looking at this and I was like oh this is hard because the like you said the dragon drop API is very rudimentary and then it's like getting it to look as nice as this does is hard right because yeah got to do the animation stuff like yeah these JavaScript libraries are so nice because they just they abstract all this for you and it's just settings you know and so we want to leverage that so all right so let's start by getting this we're just going to get the whole sortable JS so let's go to GitHub and let's see if they've got to download somewhere maybe they have a CDN a lot of times what I'll do is just go to their CDN CD I love cdns that's I'm all about cdns I I know everyone's moved to like npm install it local builds and have a whole build process I'm like there CD on it you know exactly I love it some Dev on it so we're not gonna use the CDN though we're gonna pull it in I don't know what should we do we can use the CDN yeah either way so you can e you can do that or you can download the Min thing which is what I that's what I did before I'm I'm a little more comfortable doing that that's fine because yeah then you can work offline yeah Ms Christensen on Visual Studio Windows the like the full Visual Studio what do we call it full fat Visual Studio he he built a an addin that specifically does what you're doing here you type in you type in a JavaScript library and it pull up CDM and add it to your project hey John hold on I got dogs barking at the door real quick just a second get that coffee while you're out yeah let me see if I can pull up this thing so so um ads Christian that's Christopherson um and then it's like Library I haven't used it for a bit all right so let's put this thing in the root and then I'm gonna make another folder here I think I'm GNA call it javascripts portable we're going to save it in this folder okay and now we would just want to include it in our project right and I'm just going to put it in the in dub dub dub root yeah in dub exactly um so now we've got javascripts can I I don't know if the vs code will do this nope it'd be cool if it did let's see here it doesn't do it no that's true it should be JS not javascripts yeah uh so what is our so CSS okay so I should have just hit it directly from JS oh yeah okay it's not like this oh whoops I didn't close the tag we go I know what I'm doing y'all I promise it's not readily apparent okay so now let's look at our application here right and so drag and drop shouldn't work let me just make sure yeah it's not working so here just make sure that it's actually pulling in our sortable you see sort yeah sortable men right there cool all right so that's the first part we've included the sortable the next part is that we need to go through and we need to what we want to do is create create like a reusable sortable list the reason that I want to do this is because I do want to break this out at some point as like its own Library John like we were talking about yeah and so I feel like doing it this way sets us up for that yeah that makes sense okay so to do that right now in our components we have this bundle item and bundle item editable so if we if we look at this edit page let's at our edit page here uh let's close this close it out of here okay so we have oh it's like super not happy about stuff but it does exist I think it just needs to be reloaded well you need a space after that quote for one thing wait it's no no you don't that's weird just reload it it the tokenization gets off sometimes um all right so here see we have this like four each link and so what we want instead is like this sortable list which doesn't exist right this does not exist and then we want to pass in the this this links list that we want to display and each item needs to be sortable in there this is the abstraction we want to work with and so inside of here this is what we want we want a sortable list and then we want a sortable item right and then inside of the sortable item this is where we'll put all of our markup and in this case it's bundle item editable right that's all it is and then we've got to add some of the properties on there but this is this is what we're trying to get to this is the end do there's multiple sortable items so right right exactly and so we'll take a look at how this works here we just make sure I've done this correctly yeah and you got to close the sortable item wait sortable list it's SL sortable list at the end oh yeah so there's multiple of these right but the sortable list is responsible for rendering this the way this is going to look is we're going to say the items here is going to be um from our state container [Music] container link bundle. links right so we're going to pass in the links and this component is going to be responsible for iterating over them and displaying each one as a sortable item now I'm not saying this is the best way to set this up it's just how I've done it yeah so uh let me see so um f snall asking does this sortable compare so I think that's good like we're not this is not sorting by a this is user sorting or ordering it's a user reorder of the list it's not like sorting them for us based on an algorithm or something all right so let's create this component here so now this exists let me save this oh and our sortable list what we will do co-pilot like please let me type code for you sortable yeah go pilot oh man it didn't work I was trying to with emit you're supposed to be to do this right yeah oh there he goes got it Dad yeah so we're going to create a div that's going to act as like the wrapper this is the div that we're going to pass to the JavaScript okay need an HTML element to give it so that it knows what to turn into a sortable list and then inside of here this is where we're going to iterate but before we can iterate we need something to iterate over right so if you remember we called it items so we're gonna have a parameter um and we're going to call it it's going to be did it get it yeah okay nice except for we're not going to do this Steve well no the docs do this I don't know why um I don't know why this is the case but this gets rid of that error right actually we don't want I just want the just put the name space at the top oh the whole null thing yeah yeah so this will fix this I mean you can do that or you can initialize it so you can say equals blah blah blah yeah I guess when I was looking up how to make reusable components this is how they do it in the docs and I don't know why I'm just doing it the same way okay all right so we've got our items and now we can iterate over these so for each item come on co-pilot what are you gonna give me this isn't quite what I want uh it's close so inside of here what we want to do is display essentially that bundle item editable remember because we we're passing it in here so we want to display it we actually want to render it here a render fragment it is a render fragment that is exactly right so what we're going to do here is add another parameter that is a uh render fragment did it get it no on where's my prop tab tab yo if you can't prop tab tab what's the point the render fragment we're going to do a render fragment here and it is going to be of type link it's going to be sortable item you need the using to bring in the link yeah and the reason why we do this is because we need to be able to pass the link down I think this is why doesn't it just just put it at the top yeah this is like a setting or something all right right so now what we want to do here is we're going to add a an HTML element because we need to style this a little bit and we need to give it a key as well so what we want to do here is we're just gonna have a div the class of Link item and then for the for Loop we want to have a key and what we're going to do is we're going to use the item doesn't know what item is item and items can not use local it is declared right here that's I feel like it's all messed up now it doesn't know everything it's just like no I can't I can't even can't do it can't deal so what is okay so here item and you can see like item id item is what what is item item is of type string bar item and items item is not a list of streams there you go link there we go need an ID yeah there we go so yeah so that key thing's really like my experience with this that's when you want to tell it like then then if you're updating things or moving things around or whatever it's able to track like what what they connect to exactly right it's a unique identifier for each item in the for Loop and this is this is recommended and is the case for react and View and pretty much everything else you might do all right so then in our shared library in our link the ID doesn't actually have a value right and so what I want to do here is give it a new good because it it doesn't matter what the ID is just needs to be something unique yeah and I've actually done that in a different we've gone back and forth on this I think it just it needs to be set somewhere I guess that's fine we'll set it here and if we have to change it later maybe we could do that yeah we can do that uh all right it doesn't hurt to always have it and then when you pass it to the server it's like it's already been assigned it's already there exactly yeah and so question here is isn't a guid kind of big we actually are going to need a guid because that's going to be um that's what Cosmos saves it as yeah if we don't pass it Cosmos will create it anyway so we're gonna get it no matter what we want to do and and Cosmos is Geo replicated and distributed and all that stuff so it's it's using goods for for its own sanity so here what we're going to do next is we're going to check and make sure that our sortable item is not equal to null so this is kind of right I kind of want this I want this sble item is not equal to null actually we don't have a sortable item yet we need to create that so we do it's our render fragment right oh right right so you can set that right yeah we should be able to so if portable item is not null take all that and then we'll here what we're this is pretty easy we're just going to render out the uh sortable item with yeah we're just going to render the item right right so recap What's Happening Here For Me John okay well so you've got you've created a component you um are passing in a list of items and then it's iterating through and it's writing them out if they're not null which it is kind of weird why wouldn't they be why would they be null but I'll I don't know again this is what the docs do so I'm doing it too okay yeah we don't we expect it to always be nomal and then it's just going to iterate and when it does it writes out the render fragment and what's cool with the render fragment thing is that you're you're passing in a block of HTML so it's just going to write that out exactly all right all right so let's make sure this actually works right so ideally this should just work it's not gonna I just want to make sure the the thing actually renders on the page first okay see okay yeah and then this new link here because I believe remember we said it was of type link and so the context then let me go back here we said that the render fragment is of type link okay so the context then is link and it gets pass down which means that we can use it here okay so context means like the model type is that right EXA something like that yes and I don't I wish I could explain that better but it's a type link so we can reference it down here in the bundle item okay all right so let's see if this renders make sure I didn't get a rude edit yes I did yeah I'm I'm learning yeah all right you know that's what we need we need a vs code extension that when you get a rude edit it like flashes a little light somewhere or something oh we got two that's an interesting development yeah what happened there well you had one oh no whoa what's happening let me consult the I'm Consulting I'm trying to move there we go oh because we never removed the original code all right problem solved so now yeah and then uh all right so this is working right we've created this reusable component handy render fragments y good all right so now we need to make it sortable so now things start to get interesting so we need to call we need to initialize the JavaScript that's going to do this from this file oh hi Leila and we need to pass we need we need the JavaScript be able to call back into this file to re actually reorder the list the JavaScript is going to pass back the old Index right the index that the item was at before and where it got dropped I didn't pay close attention to it did you put the JavaScript library reference in the root of the whole thing yeah right here um but where where in HTML did you link that in oh here okay yeah it's literally in the HTML right which I guess it's a small enough Li because there's you can also like put it just in the pages that are sortable you can right and so that's one of the questions we need to like how could this be improved sure but it's like make it work and then make it work better right but for most people you know they if they don't ever see this this page they shouldn't have to load the script but but John we actually have a bigger problem than that that we need to address at some point which is that if you go to like let's see if you do this right which most people are going to do you don't need to load up web assembly and the whole project to see this page you just you don't need all that right and so we're forcing a ton of of bits on people that they don't need and so at some point we need to refactor this page as like a static page that does a simple JavaScript call yeah and you know there so we can do that there's also ways to server render stuff um which we could look at too with with static web apps I think so I'm not certain I've thought about different ways to do this but I think the easiest way is to just have a static file that because all you need all this is y'all is a single fetch to the API that's it yeah it's very very simple all right a tangent we're off the tangent all right so let's do JavaScript all right coming over here um what extension is that it's like CSS turn that off old what is that it's hiding the class names collapses CSS yeah because if you use something like Tailwind yeah that's exactly what specifically it is an extension specifically for it's not called Tailwind but I mean but it's it I'm one of the few non-believers in Tailwind like I get the it's productive but it's just I mean it's it's fine I built stuff with it I built stuff without it it wouldn't be my go-to but I don't have like religious hang with it I think that's silly okay oh gosh what is Tailwind Tailwind is a CSS framework where you don't literally everything is a class so like you want tting it's utility class based right so inste so you have utility classes that do everything um and instead of components you do like you do you say like the same way bootstrap has a few of these like where you add margin or you add padding or whatever Tailwind is all that and so then you end up with classes that are exactly this is what right Max Flex oh match public code my first reaction to this was this looks very much like the style attribute in HTML and then I said something about that on Twitter once and that summoned the Tailwind like zealots and my Twitter I almost shut off my Twitter like it was just ridiculous they were like yeah people that like it really like it really like it it's very productive it's just I like I like CSS as a stylesheet language and you create like classes and then you write semantic I bought into the whole semantic HTML thing back in the day and it's probably not usable anymore but I still like it yeah that's we're showing our age now right yeah what is that unobtrusive JavaScript or something it's true Leila says there are ways you can do semantic stuff with it you can wrap classes and custom classes there's ways also Rob connory has shown me stuff where you can like write you know like really clean stuff and it EXP fans out into like you can build bundlers there's all these ways to do it but yeah all right so we'll leave John to fight with the I've made my piece people love it and it works for them and I'm happy for it and we use it actually on the net website and I've worked with it there and it it's great we're gonna need our state container so we're going to get that and then um we really should be doing this which is we don't do this a lot but this right here so that like if the state change the page changes like I don't understand why Blazer updates sometimes and sometimes it doesn't but I've gotten into the habit of just doing this yeah that I know that it will I mean I think it goes way back to the thing you mentioned earlier where it's like it owns the Dom and so it's tracking all the changes and you know what I mean so so that whole state has change tells it hey I updated something you may not know about go like you know like um update your books like go back and check everything and update your Dom based on everything and then and so yeah exactly all right so now we want to um like it kind of whoa so basically after the thing is rendered we want it to load a JavaScript file so this is it we're just because we only want to load it once we're saying this is the first render of this page we're going to load a Javascript file um but we're not we're not going to load so the sortable is already included we need to write some custom JavaScript script to to pull us off you're not telling it to load it you're telling it to invoke it right but it loads it so okay yes and it's actually it needs to be invoke a sync and we'll we'll fix this in a minute but before we do that let's create this JavaScript that we need and again there's probably better ways to do this but what I've done is created a main.js file here and I'm just doing things here and I'm going to show you an old trick because the the JavaScript that we're loading really it should be scoped to just this component so the component knows about it but the application does not yeah but I don't I'm not 100% sure how to do that so we're g to do it this way and then maybe at some point we can come back we like when you make this into a component you can fix all this John okay how many times for you ahead I'll put it on the list all right so what we're gonna do here is we want this JavaScript to be available because we're going to include this main JS in the page right so let's just do that can co-pilot do it does it know close enough yeah it's gonna get loaded no matter what there's not a lot of it so it doesn't really matter so what we want to do is we're gonna attach to the window object our own namespace called the URLs and what this means is we can put stuff in here like functions variables and that we can reference globally without polluting the window right we don't want to just attach stuff to the window because then we're just polluting the global name space you're asking for trouble but we know that there will never ever be a JavaScript window API called the URL list right so we're safe doing this you're you're pretty safe that is something that bites people though like it does but so this is the safe way to do it is to to create this namespace that's pretty specific and like right like this is never ever ever ever going to be a thing I mean right right we're g to put our sortable code here and what we we're just gonna have an a knit method right and this is what we're going to call and we're going to pass the ID of the HTML element that we want to initialize the sortable on and then we're going to pass in our razor component we actually going to pass in that sortable list component so that we can call methods on it from JavaScript and then we're going to do a new sortable and this is part of the sortable JS this is just the sortable JS API right with the ID we passed in and then um yeah we can kind of stop there for the moment we'll come back to this this is like all we actually need to do what what's wrong what don't you like no it's all good I want there are a few good um comments here first of all oops well this one Chris sany has a great dra dragon drop guide and I actually looked at that early on and he his he has a great blog post and um a library and basically he's wrapping HTML 5 Dragon drop and we talked about that a little earlier on like that gets us part of the way there but HTML 5 Dragon drop doesn't work on iOS doesn't have these fancy animations and sortable is awesome so this is great to we're basically integrating with an existing thing that works great it took me a second to to catch up with you here but I think this is the right way to go another question why not typescript uh because why yeah I so my my thought here was we're writing we're not we're just writing some integration JavaScript that's just linking over and if we did do typescript we also then have to have a build step and all that this is pretty here this is so oneoff it just doesn't make sense sense yeah but the original application that's written in view is written in typescript right so Co in that case I did use it for but for me like if you're just gonna write a one-off script doesn't make any sense but you know I'm up to being told why that's not right my high level thought and I've written very little typescript and and stuff but is that it's all about you get most of the benefit off of it when you're using types and like where you've got it like bind different types and all that kind of stuff and so if if you're using interfaces and types and stuff it can really save you a lot of typos but this is true yeah we're not doing a lot code here okay so the only other thing I added is that I want to I don't want people to be able to just grab the whole thing and drag it because there are text boxes in there that you can edit and if that was the case when you tried to like click Text and drag to highlight it it would drag the element which you don't want right so we have a drag handle and if we go to our bundle item editable it's this thing right here right and I believe I add we can add it to the whole column link drag handle what did I call it drag handle just going to add this class that's what I called it really don't need it additional class that's kind of silly use this one it's already there okay so that's the handle we can only drag if we click and drag from there okay so now we need to call this JavaScript which we're doing here so we're g to invoke this thing and what we're gonna pass in this is what we're gonna do so and this is where Steve comes in so cut it's of type object and this part I don't understand yeah I think we're just basically saying like it's generic yeah that one I I don't understand but we're what we're gonna pass in what we want to call in that that little script so if you remember it was called the URL list right then we called it sortable and we called it a knit right so it's going to call this function when it as soon as it pulls in the Javas as soon as it pulls this well it's not going to pull this in it's just you're right it's just going to invoke it you're right so it's going to invoke this and then remember we want to pass in the ID yeah of the thing we want to make and this is again this is so that we can make this a little more generic we could hardcode this in as well and then lastly we need to pass in a reference to this file so H how do we do that so what we need is a reference and this is how Steve did it so it's a net object reference right this is of type sortable list and he just calls it self- reference H it's just a reference to this component that's all it is right and then we're going to pass that to the this right here let me just make sure I've done that correctly oh he does interesting so he does this I guess oh he has you have to create it okay this is all magic I don't was this so this was code that Steve wrote did you see stuff about this in the docs about doing this yeah uh yeah okay passing the yeah so if you go to the interop docs this is in there and I I had this before I called it something else but I I got at least this far and okay what is the problem here JS runtime first of all where's our runtime do yeah do you need a using oh I just called it JS Lea's asking is it like a call back I don't think so it's more like a utility that interrupts in it invokes it's like a way back in the day like a dll import or right what's this thing here I part of the interop it allows it to yeah okay so I guess it's it's not a call back but it allows inter interop back and forth It's two-way interop right so you're basically saying like JavaScript do this thing and if you need to interop and pass things back to me here's how to find me yes it allows JavaScript to talk to net across whatever Bridge they have that they build right that's the inner up yeah and this is I mean this is this stuff is tricky right like this is just hard to figure out it's not complicated when you see it but it's complicated when you have to do it you know when you're try you're try figure out I wish like Blazer is invoking this thing and I don't know technically how it would work or what I'm sure there's reasons why it can't but it feels like Blazer could just do that for me like basically I'm calling into JavaScript it could pass the reference you know what I mean yeah like it could just work yeah um okay so if that's all we did let's check and make sure that our files are being loaded so we have sortable and Main and then if we've done this correctly this thing should be sortable and you can see that it is it's a little goofy but right like the UI doesn't isn't great oh not moving the thing underneath when you move it exactly right so this is like the HTML 5 this is what HTML 5 Dragon drop looks like see how it's like a ghosty item here and you can't change this this you can't style it this is not ideal okay yeah this goes to some of like Janis is mentioning some other sorta bles I did spend some time looking at other Blazer sortable they all kind of either are expensive components or there are things that wrap on top of that h ml5 drag and drop which have those problems like you're showing there they don't so so to style this we actually have to tell we actually have to override and turn off the HTML 5 okay and to do that we're gonna Force the fallback and let JavaScript handle this and this should give us some better behavior and then we're going to style it here in just a second but if we force the fall back do we get see how it's a little better like it's still see-through but we can style this thing now uh and so the way that sortable JS works is that you have these it it attaches classes to these things that you can then style and this is just part of their docs but we need a CSS class uh some CSS rather so we're going to have sortable item. r R er. CSS and then in that we're going to we're going to style the sortable ghost okay which is the thing that you're dragging over so we're going to set that visibility to Hidden do this assuming that it it reloads the it does not so I I believe if I remember corre correctly the scope CSS file sword item razor. CSS was defined but not associated sortable I sort of a list my bad oh right if that'll work it's still showing the timing so see now it it moves nice yeah so this is what you're going for I like that yeah right this is the behavior we want so we're actually really close the last thing we need to do is style the fallback and the fallback is that item that we're moving around so it's sortable fallback we're going to set the opacity to one uh and we're gonna it's Friday so uh import I actually don't know if you need this but I feel like I've got it there I feel like it's there for a reason yeah it's you see the opacity is still not it's not go yeah or figure out what what else is overriding that but since it's but now it should be yeah so now right so this is the behavior we want we've got it and the delete should still work and it does right so with other cases with dragon drop I can see like I can see being able to use HTML 5 Dragon drop with the caveat that it won't work on on Safari but like for this like spec you don't want you want it to be at least as good as the previous app and and it's exactly I'm being very I'm being very demanding about this and I'm already giving up the fact that you can move it outside of the the dragable bounds which sortable doesn't support this but like the other one the other one um can I [Music] do original yes it I forgot about this we fixed this and it's so much better shouldn't just be putting in random Dooms that's that's dangerous but like in this one you can only move up and down right like see you can't you can't go out of the bounds yeah which I really like and see the animation is super smooth this one's not quite as good but man it's close you know I think we could change the animation there though and make it a little bit Yeah can tweak this actually yeah what are the settings ins sortable so animation yeah is 150 make it a little slower that work that's a little better right this is what we're looking for here yeah are there other fancy settings ins sortable I guess we don't oh yeah there's all kinds of stuff um if you look here these are all the settings that you can have wow whoa whoa whoa whoa where is it where's the JavaScript API dot dot dot that it's down here somewhere like I'm losing my mind oh this is a this is the view dragonall what portable here we go yeah wow okay big time would be if we contributed see how they have the view and other ones contributing a JavaScript thing to the sortable library that would be yes yeah you could do that some of these like I don't know like drag over bubble I don't know what this is yeah I don't know what these other things are and hold on I I need a a b class oh yeah Direction horizontal I change this to Direction vertical easing functions there are yeah eing oh yeah yeah for default see eings doet for examples oh my gosh so we could do all kinds of cool stuff with this man I mean really easing is such a like when you way way way back in the day I did stuff with silver light and when you like tweak the easings it's like things get so pretty ease out back oh it like goes down wow he's out bounce I mean it kind of doesn't I don't know that we need easing on this because you're manually dragging and dropping stuff so you kind of want it to move where you move but I guess that might be the easing for the stuff behind yes that's easing for the stuff behind I mean so we could change this but we can mess around with it might make it look cool but so yeah I mean this is the magic of JavaScript right is that you there's a great library for it yeah you have so much control over the the interface all right so now I mean we haven't really done the hard part yet which is like call back and actually do the work so right we need so we need to Now update the list all right yes but I I have had too much water and I need to use the bathroom I'll be right back okay gosh well I can fill for a second because one uh one neat thing that Janis brought up was what about quick grid and I will show that that's kind of a neat it doesn't apply here but it is a cool thing um quick grid is a library that they built for Blazer and it is it's pretty neat like um grid Library yeah so it has so this is a um you know quick and dirty grid but they they have some nice stuff like for instance they've got like virtualizing is pretty neat so this is an example that's loading 22,000 results and it Pages them in so it only loads them on demand and stuff so that's pretty neat and then um styling they took the opportunity to use um comic Sands which is neat how many columns I don't know that there's a limit honestly it's um you know it's it's a wrapper on top of a table an HTML table so honestly I bet there would be no problem with 200 and and it has all these different data sources of course you can do API callbacks but you know works with like in me memory and all kinds of things so this is pretty neat this is also um they did a lot of stuff where they did um some optimization for it like um I talked to Steve once and I was like hey we should like show this an example he's like we hyper optimized it to be like really performant and stuff it's very specialized at what it like hey I'm back I'm back all right all right I can't even make it through the hour I'm trying to say stay hydrated y'all all right B I was showing off Blazer quick grid I don't know if you've seen this this Does this does not apply for what we're doing but this is a component that they built that's like a grid and it's you know just like um it's very like you know just a nice simple grid component um and you can hook it up to different data sources it has virtualizing paging filtering um so pry oh it's like a it's like a data grid it is like a data grid um here so you can do you know B I don't know what I did wrong oh because those all have B it filtered them X Y yeah pretty neat okay I will return back to your screen I guess what is that ASP neg see like we could put are sortable up here sortable for Blazer oh there you go just steal their design okay I guess back to your screen here we go all right let's call let's call some stuff yeah so we need to call from the JavaScript back to let's go to our main file here oh wait SC we need something to call so we want this JS invocable we have to decorate it like this so that it knows that it can do that and then we're gonna have a me a a a drop method that we're gonna handle so for here this is um drop right and it's going to pass us the old index and the new index and this is the sortable library is going to do this this okay that's just what the event does and and if you go back here to let's see to this documentation sorry I'm sorry about the scrolling but you'll see like right here that we're going to use the on update right and the old index and new index are here right it's it passes this right here on the on update which is what we're going to use okay okay so heading back what we want to do then is reorder the links now we can do that here or we can do it in the state container and I've sort of taken to doing these things in the state container I don't know if that's right if I'm mutating the state oh going through the state container exactly so I'm not deleting I'm not and really we should be adding things here all through the state container then we start getting closer and closer to using like a Redux style and there are some more advanced like State Management things which reminds me another thing we're g to work with local storage at some point too oh yeah so we want to sync to local storage okay so here is we're going to reorder links here's the logic for doing that so what he did he did it a little bit little differently than I did so what he did was he first set a reference to this links and then he gets the item to move from see oh so he's got it old he's got so what he did is move from index which I think is probably better naming right yeah move to Index right and co-pilot will help us out again there we go so he's getting the item from the old index and then he's going to remove it that's I I would think to move the new item well I guess it works and then what he does is something quite interesting where he says if move to index is less than links. count I'm try I'm not I haven't looked at this I'm not sure why he's doing this but he inserts otherwise he adds so I think basically this puts it at the end of the list yes yeah right this handles the last item bug where you can't drop it as the last item yeah and I think also probably that that is more efficient because ad it doesn't have to shuffle things around right okay right and we're gonna notify that the state has changed but yeah that's I I'm almost positive this handles the case where you can't drop it as the last item which I saw everywhere a lot of folks are having this problem all right so we just need to call this thing from our sortable list so sortable list sorry bear with me reorder links all right this is our drop we're just going to call the state container. reorder links old index new index boom so easy so easy wow all right so now now we get now we get to call this thing so we're going to use the onupdate method talked about that on update and I had gotten this far by the time I got to Steve fixed it so we'll start with the broken State and then we'll we'll show what he does to fix that so to call that drop method it's fairly easy right we just invoke method async it's going to do uh so interesting he grabs what is the difference between old draggable index I don't know what the difference between these is I mean the parent is the same in our case I don't think it matters but if the parent was different it would matter which I think is what he's setting us up for here in other words like if you're dragging from one box to another box the parents are different right um you wanted to handle that you still there John you want to handle that case okay I guess I got a phone call all right go take that phone call all right y'all so we got old dragable index and the new Dragon Ball index we passing new drag ball index okay so that's what we're passing to our uh our sortable excuse me passing back to this drop method here um and and let's go ahead and do this like let's just no nice all right so let's just like log this out so we can make sure this is actually being called and then let me make sure okay we look good let's let's just make sure that this is actually all copasetic because we've made a lot of changes so but now what what should we see when we drop we should see a console right line saying that the drop occurred logging out the index we did not oh whoops we called it something else we go bug I meant to do that all in the name of Education all right here we go bam right exciting exciting so now the problem though is that we've called the reorder right so we have two.com and one.com and but watch this if I put in three.com right and then four.com now watch what happens I'm gonna reorder these and you see what happened wait I didn't honestly because so watch I'm going to move three three I'm gonna move it here now watch 2 314 two 4 3 1 what's going on exactly right so this is as far as I got and I was like I don't understand and so this is where was like oh okay sortable is actually mutating the Dom and in order to make this work we need to tell the sortable cancel this cancel this whole operation and let bler handle yes so we're literally going to cancel the drop so to do that oh I see you're saying thanks a lot dragable or sord sortable whatever you made a very pretty drag event and we'll handle the drop from here exactly thank you for handling only what people can see yeah so it's event. item. remove and again you'd have to get this from the sortable so it's basically here the item yeah so this is the dra rged HTML element we're removing it okay and then we're going to put it back to where it was before just these are just um these are just Dom apis okay that's all they are we're we're literally moving things back wait event. two. insert before Is that real uh yeah okay yeah that's from mdn right so these are just just Dom apis that we're calling now and we're going to put the item and we're going to move it to uh the old index okay so now we get kind of The Best of Both Worlds a little bit we get we use we get the nice UI handling of the sortable library and then we kind of go back to Blazer which is capable of managing the list just fine right so we're just going to cancel cancel the move entirely let Blazer do it do its thing sure why not strange strange uh tone it took there very hip uh okay so the only thing like I don't understand why there isn't an API in sortable that's just like cancel canel yeah um they cannot they cannot conceive of why you wouldn't want actually they do don't they have something where you can that's weird there's got to be let me go to their issues and see if there's a cancel how do you cancelling sorting when dropped outside how to cancel sort in one container you just want to prevent the on end event from firing uh there's no no answer here it' probably be under closed if it was resolved how did disable sword stop propagation no canceling the move not aelia wow that's a throwback yeah there's no that doesn't seem right set data I wonder if you could just override the on end event set the on-end event to be not a thing but if if it's not a thing the event's still going to fire right but the library is not going to do anything yeah I mean the code you've got works it does yeah and I don't Steve already looked at this if there was a way to do it he would have done it um okay now all of this should just work [Laughter] TM two.com three.com for.com let's drop it and it works beautiful right because Blazer is now handling everything and if we publish this it won't publish but we can actually inspect the what it's trying to do and just make sure that it's sending uh oh I haven't added it to the I I haven't made the update to add it to the payload yet and it's actually not doing anything at all but yeah all right so that's that's it y'all nice okay PR sure I mean that's all we have to do and we have a sortable list in Blazer let's go back row okay so this is what you this is the JavaScript handling this is when Blazer calls it what what did you do again in the where the majority of your code here is in sortable list huh sortable list yeah so let's recap what we did yeah we created a new component called sortable list and in that sortable list we have a parameter that we're passing in which is the items that the thing's going to iterate over that's this and then inside of that we have this wrapper so we wrap each item we add an ID to it for Blazer right so they can track the items as they're moved around and then here we have a render fragment which is sortable item and what this allows us to do is pass literally anything as the body that gets shown here yep any HTML we can pass another Blazer component which is actually what we're doing and then on after the first render we call that sortable initialize it on the list and we pass a reference to this component and then from the sortable once it does its thing right it invokes this method via the JS runtime that Blazer provides mhm and then this method right here gets executed this drop okay and the drop does its if it inserts if it's below and then the drop calls the reorder which happens in the state container okay which is pretty straightforward the only thing is this Edge case of moving it to the end and then we still have to do the work to save it yes the post yes so if we if you go to uh that would be in the navbar no in the new link here on valid submit right it actually needs to call the API yeah and actually we should do something else while we're here um so one of the things that's annoying in this application currently is that when you add in the other thing I was asking Steve about when you add in you have to keep putting your mouse here oh right it's not yeah we want to just set the focus back so to do that you should be able to like this is the way this should work is that you add a ref here right which is like no not here but on this thing yeah um let make sure I'm doing this correctly yeah so he he called it we're adding a ref here what is the problem new we haven't done anything with it yet so then I'm valid submit you set that set yeah we need a we actually need a um right we need this need to declare this ref there we go and then we W to set what we want to do is link input get the element right value of that oh we got the focus focus asnc we're already clearing it somewhere here this actually will mess the whole thing up so that if you if we do this it won't work at all because it's this really bizarre way where it's like you're like why why does that not work it's just setting focus and the reason is because we're setting the model equal to new so it's like clearing out this form right and redoing it and so instead he's like it's just a string so just set it to null so it doesn't redraw that form okay apparently and then it's just like one.com oh it didn't refresh now this should work theoretically uh uh oh it does have a model perimeter what did I do wrong not a fam oh oh oh oh oh he did no this is right parameter on New Link added task one valid submit oh this is quite interesting instead of this right I don't even know why that's there we're doing this we because we should be calling this await uh on New Link added right oh setting the URL tool if you set the model tool it does oh okay and that's the only thing where you using in that model at this point is yeah that's it yeah see look at that that's what we want nice right and actually our model is just yeah all we're using is the URL so and and that's all we'll ever have there yeah so that's it I mean we've fixed two pretty major I would call these major issues or they're not major they're just like well they're yeah that's fundamental now I feel like this is a big kind of thing to clear because now we're at the point where we've got a list it's editable and now we're at the like you know I I really like it's going to be so pretty when we get the open graph and then we've got the user stuff to save we've got some state things I just want to add one more thing here you wanna I yeah we're close I in fact the open graph I'd love to do that next next if we can MH but I just want to try I had to re restrict withes I was really like oh Blazer could totally do the open graph stuff but it cannot because it's blocked by cores it needs to be server um so will this work will it restrict it to just a vertical drag that would make me so happy no you want to block it from no yeah I don't want it I don't people be able to drag horizontally but that is not in the cards for us Direction vertical right that's what it said here Direction horizontal how did you do it before or did you it's a different component I don't think sortable actually supports this I pretty sure I looked into it yeah it's okay all right we got to end this thing we gotta land this yep do you so we should merge Steve's PLL request give him some credit exactly so we're just gonna dump all this well actually we'll just we'll just commit it all and then we'll kill the branch we don't want to lose all our work just in case Branch doesn't work somehow that's bother him again Steve so what you're doing solve my blazer problems not yet so let's do this is Steves everything's already committ it be great to to make like a component out of this because other people could use this in other places totally yeah I think this is the kind of thing a lot of people would want to do so fixed it's actually already in there look it looks like as a PLL request I think I updated it though it doesn't matter it doesn't matter um so let's uh I don't know what kind of guy Steve is I've never met him in person but hopefully he likes hearts and people telling him that we love him Steve is great all right I mean he he that was so nice jumped in like we we pinged him Wednesday and like Thursday morning because he's over in the UK woke up to like okay I did all this stuff looked at everything like he he jumped right in yeah it was awesome and I mean the his level of knowledge on this stuff is just crazy right like it was so fast he's like oh oh yeah that's why this is happening all right so we should be building now let's go look at our board what get Hub GI Hub okay this action should be running oh what it's what didn't I just merge it merge en closed did it already I think it had already run so maybe it's a very quick merge because it already runs the stuff on the no um what is happening I mean I can kick off did I not merge it to Maine oh so he made a poll request to your poll request maybe I should have paid more attention to this see see look at that head yeah my goodness merg to B mer B so you gotta merge your sortable see that right there here we go here we go we should probably let it build though huh yeah sure let it build uh okay well while it's doing that you could open up the project did we not have a thing for D Dragon drop beautiful so for next time the I mean their save list is definitely a thing an open graph yeah I think save list and open graph in this order okay I'm putting this over here I don't even like that as part of save list as part of save list too we can integrate because now the list has an owner so that's a thing too all right so let's see yo yo take me back take me back that's an interesting thing it's actually the project is in a different it's not in the the project is not in the repository it's yeah it's just associate it's at the I guess it's at the or level and it's just associated with this yeah pository that's very fancy just want to make sure all this work still building what's my what's my status what's the STA ey I love these actions I know it's so great man I mean this is the best part of these new yeah I I wrote this whole thing for the net blog where it validates and it creates these like huge hopefully not huge but like it creates these comments I use OCTA kit and it creates all these comments on the thing with like you need to fix this you should check this that's very cool yeah we can't automation yeah when I was a developer we did not like when I was a real developer we did not this was not a thing no finished upload it's deployed it's polling hold on a polling on deployment it's got to give us our kind of funny yeah here we go Victorious Forest I know oh whoa whoa I need oh actually it should just give it to us in the pr one sec one sec is borest with two hours borest it doesn't just oh yeah here it is yeah just because it adds a a comment and if you remember the login should work so cool I gotta do it on my personal I just want to make sure everything's still working man fail dependency oh this is exactly why we did this exactly I we didn't trust this those guys so yeah actually I saw this in the docks recently they're kind of like good luck I gotta verify get that to fa that's right or you do chat I got to before you did yeah yeah yeah yeah yeah y okay so working and now well I feel like it's not working oh yeah it is okay okay now and now and now let's go okay come on okay this is cool all right so now we can safely merge this I think where's the where the GitHub repo go I think I just clicked away from it all right that's it John that's it okay so I guess we're back next week and then then um things start getting more holidayish next week is all you you're doing some sort of API business something some sort of something all right stop stop how do I stop sharing stop there we go like that and then we go like this cool all right happy Friday thanks everybody this is fun I guess I'm writing some code next week find the goodbye goodbye thanks for [Music] [Music] watching

Channel: dotnet

Views: 5,407

Keywords: dotnet, blazor

Id: OLCnfudwNSc

Length: 88min 43sec (5323 seconds)

Published: Sat Dec 02 2023