Kanban Board | Vue 3 | Drag & Drop API | VueUse | Tailwind CSS | VeeValidate | Zod | Typescript

welcome back to my YouTube channel in this video we'll be building a Canan board using view3 tailin CSS types skp and couple of other libraries like V validate Zord Etc so let me show a demo of what we'll be building by the end of this video I can add columns I can add task I can edit task I can delete task I can edit column I can refresh if I refresh it's going to be persisted I'm using local storage for this and obviously I can delete the column also I can drag The Columns I can drag the Tas to specific locations I can drag the Tas to any other place also so this is what we're building by the dous video let me show you uh I've already went and create a basic project using white as well as D CSS I've also went install couple of dependencies let me show you what we already have we have V validate we have view use we have uu ID for Unique IDs we have we'll basically using V validated for form validations as you have seen in the demo we have form validations done there and we will be having Zod also couple of dep dependencies are there you can ignore them so I also had went and created a types which will be using throughout this project so couple of things as you can see we have a column type which is going to be name column ID task and for types we'll be having a couple of types which you'll be using and actions are basically the actions which should be having like add column update Etc transfer data is going to be used for drag and drop API let me show you we what we already have in here and here as you can see a local storage we have this structure where we are basically an array of columns where the first is uh object is going to be having like column ID name inside that we have the task like as you can see so this is what we'll be doing let me close this we also have schemas which we'll be using as you can see here the column is basically inferring the type using something called provid by Zord out of column schema so let me just open it as you can see this is some word somewh it would be quite cryp if it's your first time using some a validation libr order y I'll be going through it when we'll be needing it in the forms but as you can see uh this types which you get from Zord these columns and task these are going to be used everywhere else also so it becomes very easy like if you just decare the types using SCH using a schema Library like Zord yep you can use the types and through your project hence I'm using that so now what I'll do is like instead of using like I shown you in the demo instead of using local storage so instead of using p I'll be just putting everything in local storage so for that I'll be creating a store I'll using use local storage for this basically uh this use logo story this story is going to be used for our storing our columns Etc so now I'll just create those function definitions and then we can start writing the code for each of them I went ahead let me just toggle this off I went and created all this function definitions add column update column delete column Etc and I'm creating default name space so that we can just use using a conven store dot we we can access all these functions and I have also added a column like I told you previously from the types so let me now write the logic for each of them so add colum going to add the column so we can do something similar simple I'll be needing U uu ID also here so let me add that I'll also be needing a name the name I'll be getting from the parameter here I'll just ignore it task will be an empt array by default this is it I just find a column if the column exists for if you find a column basically if you don't find a column we'll return otherwise we're going to update the column and column is just going to have a name like shown in the demo for delete column you're just going to filter out the respective column for add to column again we will find a column post that we already get a column from column ID post that we need to basically modify the array similar to previously one we are taking a payload payload has the type of name and description basically as you can see and that's what we did we are basically pushing the ARR uh which we create and just add it now we need to update the task so for updating a task we need to again get the column after getting the column we need to basically get the specific column and just update that column so what I'll do is like I'll just map it let me give a different name to this basically what I'll do is like if the task which is passed to the function matches the uh task I'll just take the old task and spread it as well as I'll get a new task I'll spread that also and just return that and if I don't get it then I just return the old task so this is going to Bally find the column and after finding a column you're going to basically manipulate the task to this this is simple basic manipulation as such again here again we'll just I'll just copy the column logic find a task after finding a task I need to filter it out so what I'll do is like so I'll basically filter out a task which matches this task ID which we are passing from the column. task then we have the move task and column move column logic which is quite important because these two are going to be responsible responsible for a drag and drop API now let me addite a logic for move task so first of all Let Me Explain also so what we'll do is like we'll be taking the task uh we based on task ID we'll be get finding a task inside of the column first of all using the task ID we need to find a column where a task is there and post it we remove it from that specific uh column and then we'll be finding a column represented by Target column ID and based on whether Target task ID is present or or not we will be doing two things if the target task ID is present that means we need to place uh this task which we currently have to the specific Target task ID location otherwise what we will do is like we'll be taking this task and pushing it to the uh end of the task array which is going to make it be uh shown in the UI as the end of the at the end of the column Bic inside the column at the end of other task so that's what we do let me write a code for that so what I need is the index as well as the task I return true for this so we find a column if we don't find a colum for some reason I just return from here but if we find the column then I'll replace it column. task or splice current task index comma one I'll just replace remove it from the task itself post that we need to find a Target column ID from these columns array so I can add that code for that also then we find a Target column we need to basically also find a Target task ID from this column uh before that there will be two Logics like I told you previously if the task ID is there then you're doing something else we'll be doing something else so if the task is not there what we'll do is we basically push it to the array but if the target task IDE is there then we'll again find the location of it from Target column. tasks I'll be basically using a find index here to get the index pleas on the target task ID then I'll just push it to the specific location inside the target column and if suppose for some reason if you don't find the target task index I'll just return instead of that I'll just I've just avoided the types SK issue which is coming as you had seen so what uh let me just walk you through if you if you got confused basically here I'm doing nesting condition you can do it more better I guess but I want to keep it simple I'm finding a column which matches this task ID I'm getting the current task as well as the current task index out of it and from the column task I'm removing this current task index itself whichever matches it and then I'm finding a Target column based on the target column ID after that based on target askask ID if I'm if I passed it then I'll be using that to find the correct location in the Target column task array but if it there but but if it is not there then I'll just be pushing it to the task array that's what I'm doing in this function it become more clear when I use it so now we have to come to move column for the move column what we'll be doing is like something similar we'll be first calling the store. value here we can just use the filter if the column column ID matches what we have passed then we need to return false because you would like to remove it from this array itself along with that we need to just have the element itself and by default scenario we'll be returning true but along with that we need a Target column also so what we'll do is like because what happens is like we're taking this column and putting it to another column's location we'll be getting a Target column ID but based on a Target column ID we need to find a Target column index which because we need to basically replace this column uh our current column to that location itself let me write the code for you to become more clear if you are confused and just to keep uh not right just to keep typt happy I'll just put here Banks that's it I guess for this column to move now I'll creating a couple of common components first of all so drag as a name suggest is basically going to allow us to use this whichever component is going to be inside this component using slot will be basically putting components inside the dragable component and whichever component is going to be inside is going to be dragable drop zone is going to be a parent of dragable it's going to basically allow you to listen for the drop changes that me a code it become more clear so dragable is B basically going to have template and like I told you it's going to have couple of Events first is going to be dragable is very important and this needs to have value of true so that this uh component is going to be draggable track start is going we are going to listen on a drag start event and we going to sell because what will happen is like column is going to be draggable as well as BK and we'll be having a nesting of this component we'll be using it across so what we want is like uh the view to know that this element whenever this drag start element is uh triggered is only for this component okay uh this is somewhat nesting it more clear as we progress through the whole video but as of now the self is very important just to let you know and I'll prevent the default behaviors of couple of things one is drag over I think another is drag end I guess so let me write a script tag now uh this dragable event is going to get a props as well let me write it I'll giving it a type using top type and this has to be required let me import transfer it also okay I can and I need to import it also some is not importing okay I think I understood the issue this should be now okay not find module me just try to import it like this yeah this is working fine now so this is a type and what I'll do is like I'll check if e do data transfer is there then I'll just do a couple of things these are couple of things which we can tell to Del the browser that this element you are planning to drag it other than that the main thing is like we need to set the data I'll be giving a key of playload and I'll be basically be D sech in whatever I get uh let me write props here I just need to set this data here I just convert to string don't worry about all of this it will become more clear when we start using this dragable and drop zone Etc so I think this should be enough I guess so maybe we can go to drop zone now let me copy some of the code it's not going to have dragable it should have stop on drop here I'll just be using I'll pass I'll be I'll not be having props here as such I'll basically be emitting the data which we pass from here so what I'll do is I get the data payload and I'll basically pass it and I need to emit it to the event uh to the parent component of Dr Drop Zone which is going to be listening to this event and create an event here again I'm using stop so that it uh this Drop Zone doesn't this child Drop Zone doesn't affect its parent Drop Zone I think this should be clear um I'm assuming it should be clear otherwise it's going to become clear when we start using these components I think this is it I guess for this drop Z also now let me come to model view component for here Al somewhat similar we create a template let me first write a script tag is going to be quite small itself this is going to get couple of things first of all it's going to send an emit event which is going to be a close model other than that is going to get some crops also one is going to be the model active which is going to be a Boolean other is going to be heading now we'll be using it in a template so first of all I'll be using something called teleport which is which is the view3 what teleport allows us to do is like without going to too much nties is like uh as you have seen in demo we have the models shown in the UI and that model is kind of Center and we want it to be in front of all the other elements to avoid any kind of CSS issues as such we we are using basically teleport if you would like to go more in depth I would suggest to check out the documentation that's it for this project I guess uh the outer div is going to be basically covering the whole um screen the second div is going to be for the main content as which we have in the center inside it we are going to have our markup inside that so let me just write the code itself then I'll explain let me change this also so what I've have done is like there's going to be a parent TI which is going to be the whole screen the the another div is going to be the center part the third div is basically for the heading and the last div is for the content heading is going to basically have the heading as well as a button and inside that we are having uh below that we are having a Content which passing using slot that's it now let me add the styles I added the Styles and added also one more if we from the top itself is model active and that's it some basic Styles uh it's basically going to cover the whole viewport you can see the browser with full height full absolute then the below is basically going to make it centered using let me just close this it's going to give a background color give it a shadow as well as make it fixed uh make it centered and that's it some just basic rounding of the whole container and then we have the uh top header Bic or you can say heading which is going to have justify between this is basic flexbox you're going to have the heading as well as the button this is an X as estimate entity code then that's it just some basic pattern here so now I think we can get started with the let me close of them first of all now we can get started with the individual components which you'll be using so first of all I'll be using I'll basically creating the nav bar but before that anyway will have to come for the form so anyway I think I'll just use the I'll just create a form first the column form is basically going to be used inside a model and that model is going to be basically uh and this column form is also going to be responsible for two things it's going to be responsible for addition of a column as well as for an editing of a column so hence we'll be wrting a logic this based on that I'll be using something called V valid in this column form let me add it this is going to have a field field is going to be of type text it is going to have a name of name this let me save it and then we also have a label label is going to have name as name and like we have for basic stuff how you Norm do in basic HTML I'll have label for an ID and for form what we have to do is like we need to have a validation schema like I told you previously so I'll using something called two type schema which is provided by V validate Z integration I need to pass the column schema which I already have F this the validation schema and then I need to put a ref I'll be using this ref somewhere else so I just put it now itself column form let me give it a class of flex Flex column Gap two other than that whenever this form is submitted we need to call a function also this uh V is also going to intercept this event so it's going to allow us to do something there different let me write the function here when we do onsubmit we're going to get the values directly from the uh V valid itself so let me do we'll just check it out later on for now I I'll just add it itself later to alert itself this two type schema not sure why it happened other than that we need to do two things one is we need to emit an event basically this form whenever the add addition has been been done or the editing of the column has been done we need to emit the event of column uh basically something like close model here let me copy this other than that we need also to have defined props this is going to take two things one is going to be the column the column as well as the action these are coming from the types itself which you already have declared in here types. TS file so so what will happen is like uh column is an optional thing column is required for the editing scenario so what we'll do is like on on mounted of this form we'll check the action I need to write props here the props action is equal to actions dot edit column or update column you can say if it is then what we'll do is like uh like I've done the column form I need to access it basically I need to access the native form uh Dom element you can say it needs to be done in that way itself now what I'll do is like I'll take a column form get the value out of it then call set field value I'll give it a name and I'll take drops do column dot name out of it so this is basically what you to do is like it's going to set the field value when the mounted is on mounted of a form of this column form component when the editing is being performed and similarly we need to handle two things in the submit also if the action if it's an add column we need do something else if it's update we need to do something else uh in here I'll just to keep it simple I'll just use values type now for the addition scenario we need to call the Conan St dot add column this will need just the name so we need to just pass the name to it which is going to be values do name and for the update column we need to pass a couple of things it's going to basically need the name as well as the column ID I guess let me come back here this is going to basically need the column ID we need we basically need to pass an object which is going to have a column ID as well as a name we can get the column ID using props do column. column ID and for the name we can get it through through the values. name uh just to keep TPT happy I just put this one now we have added on sub we need to add couple of more things also on the template the one thing is error message this is going to allow us to basically have theor mes tied up like as you can see in the column for SC let me show you to now so it becomes clear basically ignore other stuff basically what we're saying is name it's it's going to have a name which is going to be a string with a minimum length of one and if it doesn't have it's going to show this error name is required and by default it's going to have an empty string as the value so that's what we're doing here let me come back there column form so here we need to pass name we need to again pass it the name here here the name this name oh sorry not this this name and this name and this name are important like theyes the same thing don't get confused with the ID name as the as well as the for name the other names are important there okay it might become confusing but it will become clear when we come to task form I guess so AR name and I'll give it a class of text red 700 and as well as I'll be needing a button also because it's a form and it's a form then I'll just give a type of submit other than that I think here also it should be name I think this is it and now I think we can go to Navar I guess we can I've already went ahead created a component Navar we'll be adding the logic here now I went ahead and created some basic marker of napar Na is going to have the Conan board as well as a add column button so let me add a logic for it now so before that we need be also needing model component here let me write it it imported as a type let me remove it so model component is going to have inside it the column Forum so for the model uh I'll be needing a couple of things one is the model active for which I'll just create a variable here the active variable itself I went ahead and created a very descriptive name you can make it shorter this is going to be by default false I pass this for heading I'll be having add column so let me just write itself directly or what I can do is like let me do it in a different way because I'll be using across everywhere I'll be getting the actions add column split do join with this space and for column Forum I'll be again eating a couple of things one is going to be the action I'll be passing it as actions do add column the next is going to be the column itself which I'll be I think another column column is by let me come back here No it should be in model so model is going to have is model active as as a heading yeah I need to pass the heading now sorry model I've already passed I need to come to column form the column form is going to have column and action action I already passed column I'm not planning to pass here because it's going to be an addition itself and action is going to be add column so it should work fine so now I need to basically uh listen for the close model event and whenever it is called I need to basically toggle the column model active the user can basically submit a form or the user may click the click but close button it clicks on close button I need to basically listen for it in a model also so I think this is it I guess for this model active sorry this Navar component I guess now let us see the Navar in action I've already went ahead and created uh basically some markup in the app. view I put an naar there so let us see how it looks like currently I went and refresh it let me add a column let me just open the local storage and just clear everything previously if it was there so let me add a column let me add to do enter it seems it's not there Let me refresh the local Sage okay local has it but it's not closing the model that means there might be some issue in the model let me open it it should close it the model should close it that means column form when we submit what happens yeah in here we need to basically emit the event also close model now let's see what happens I'll write to do again as you can see it has closed the model is added also just now let me do one thing let me first clear the local storage now refresh it now add the column to enter again refresh the local storage as you can see the too is there now so this is working fine I guess now so we can proceed further with the other components so the next of Navar is going to be column I guess so let me create a column component let me get templates so basically what will happen is like we'll be having a drop Z we'll be having an drag inside it the drop zone is going to basically call the drop data we'll be creating a function for this one column drop this going to have the transfer data like how we are passing it I don't know I'm not sure let me copy it so other than that a dragable is going to also have couple of things we need to pass the transfer data to it which is going to be an object in our case the object is going to contain couple of things one is the column ID I guess this column ID we going to get from the column the thing is like this column is going to be used in app. view to render each column this is going to get props out basically it's going to get the column from The app. View you can see like there so it's going to have the column from column ID other than the column ID it needs the type as well in our case the type is going to be actions dot not actions sorry it should be types dot column again after this drag inside dragable we going to have the main column inside the main column we going to have a header and post the header we going to have the task which we rendering later on first all we'll focus on the column then we'll go to task so the top header is going to again have couple of things it's going to have two divs oh no I think it's going to have one div itself this is going to be responsible for the whole task this is going to be resp we're going to have it div here on the top oh no I don't think one div is going to be necessary because we already have a dragable there so div is going to be the top header component is going to have again Dives here one more div and inside this we'll be having span uh which is going to represent uh the you can say the column name then we're going to have some buttons uh these are going to be for edit as well as delete just write them and outside of this divs in the top header will be having another div uh not div a button to basically add a task this going to have a plus thing much so for this button what will happen is like for the click edit scenario what we'll do is like we'll be calling a function called set selected column this is going to basically take two things one is going to be the action which we are taking in here it's going to be update column I guess and the next is going to be the column itself column do column ID I think is required similarly for the other one that is going to be for delete so let me write this function also and I think this has not been imported let me import it so anyway this is going to be set selected column it's going to have couple of things one is going to be the actions another is going to be the column ID so let me write them action is going to be actions column ID is going to be column ID So based on the actions we'll decide if action so what we'll do is like we'll be having a couple of models here in the column one will responsible by updating a column and another is going to be responsible dating col column so let me do one thing I'll just copy paste most of logic which you already have in naar this column let me just make it is edit column and let me just paste this logic here somewhere let me write it here and this is going to be update column and we need to pass the column also let me import column form first of all as well as model now we can have the auto completions column it's going to be nothing but just we need to C the column to it and it's going to do all stuff it by itself uh this is it I guess and let me just put the classes now for stylings I went ahead and basically added this Styles as you can see some basic uh flexbox Styles and some overflows handling as well as the HTML entries for a couple of them like edit as well as delete for selected column by the way I think I did a mistake it should be just column not column ID I need a column for other stuff which will become clear later so let me have the column here it's say not the column ID and let me create a variable also reactive variable const selected column equal to ref column by default I just give it null uh let me just write here also yeah so selected column I'll just put it column and whenever the action is update column I just toggle update column model the name is quite big you can make it shorter I'm just make it more readable so I'll just write as Ed column or you can say update column here just let me make it update everywhere to avoid confusion and this has to be this update column model I need to put value everywhere obviously this is going to basically allow updation and again we need to something C create something similar here let me just copy this code this is going to be delete and this has to be also be delete let me just and let me again create it here again s and let me just copy this model and just modify it for use case to have a delete model also this is going to have this delete and instead of calling update from every better just to call the fle method similarly here also I'll just call toggle delete column model again this also has to be delete column and here I'll just write are you sure I think this should be inside one more drift then we'll be having couple of buttons yes and no when we click on no it's just going to Bic toggle the model when we click on yes we'll call it delete Model sorry delete column function I'll just create it let me remove this the lead model is going to basically call the cond St delete Model function and delete column is just need the column ID so I'll just take selected column because when I'm basically calling the set selected column I'm selecting I'm adding the selected column so I'll use that to get the ID SED column do value column ID this should basically remove it and selected column can be null uh you can basically put an if check I think this should be fine so delete column is going to do this now we need to uh just let me add couple of styles also to this and with regards to on drop function which you already called here instead of writing column drop let me write on drop because it's going to handle two scenarios one is going to be for the uh task as well as for the column so on drop is basically we have to check two things if the transfer data type is equal equal to First of whether it's a column type or not because what will happen is like this on drop is going to listen for both The Columns drop events as well as the class drag events hence we need to check it first what is it if it's a column one we're doing something else we need to do something else for the task one so if it's uh we need to basically call the column move function if if it's a column drop and move function is going to take column ID as well as a Target column ID so column ID we can get from the transfer data. column ID and targets column ID is the current column ID of this component if it's not clear like what will happen is like when this this on drop is going to be called on a column which is basically uh where the element where the column has been dragged to so that's why uh the current columns ID is going to be the target column ID and I need to just make TPT happy so that I'll just add here and then yeah it's okay something similar here also move task move task also going to take task ID and the task ID is going to be from transfer data task ID this is I not add it now but I'm just adding the code here itself now because I'll be doing something similar like this in the task. we when I created so I'm just assuming that I'm doing it transfer. task ID then I need to pass Target column ID as well as Target task ID Target column ID will be transfer data do column ID and uh Target Tas ID will be and we don't need to pass column Target task in this scenario is because uh this is a scenario when we are dragging the task to a column we are not dragging the task to a task itself if you had seen a demo you be clear so hence that's why we don't need to check we basically checking if the task has been dragged to a column where there was no task and if that is the case we'll basically moving the task and as we have written a logic for it it's going to basically push it there is it if you don't pass anything it's going to basically push it to the task that's what would happen now so hence I don't need to worry about it I but need to check keep typescript happy so write and transfer data do task ID okay this should work fine I guess and for column ID it's not a type string let me just explanation there so I think this should at least make the column functionality work let us see in output now refresh it so about that I think we need to first of all add the columns so let me come here and just import them let me do V4 column of store this should have come me just import directly col P equal to column. column ID is going to be unique other than that I need to also pass the column to it save mod no export me to is import store from let me see I think there's some issue here G store okay I did not do the store export I think this should fix it let me reload it let refresh everything looks fine as you can see we have the Todo I'll be adding a sty iton but as you can see we have edit when we edit it I'll just write too2 Let me refresh it's getting persisted now if I try to delete it it's saying are you sure to delete to2 no then it's there and if I again try to delete it yes it's gone so column is working fine now we and come back here in the column uh now we can I think let me just add the Styles I think it got missed out as you can see I've added the classes now what you to do is like we can come to task form now I guess so let me just minimize it just copy whatever we already have our column and just modify it how much you want so first of all the task is also going to have a description so let me copy this paste it it is going to get task not a column also want to get a column ID let me import task also other than that the validation schema is going to be task Forum schema and for props dot task. name task. description just going to basically set it how we have done fors let me move this column form schema let me just take it everywhere up here for V validate as well as so we have the name we have a description I don't yeah here also it just be task form so lab description description task submit column is going to be column ID task action now we need to check what action we need to take if the actions do add task then we need to add the task so for that I'll call it add pass to column let me remove all this stuff let me see what it needs it needs two arguments one is going to be the name one is going to be the column ID other is going to be the payload so column props do column ID then it has to have a payload payload needs to have name as values name similar description now we need to have for up date task also so let me first of all clear everything this also needs two arguments one is going to be the column ID second is going to be an updated task let me create an object out of it a b task is going to be basically be the column it needs to have name description and task ID task ID is going to be the same name and description needs to be changed so what I'll do is like I'll take task ID for the name I'll be taking it from values because the name can be changed task IDE is not going to be changed hence and for description again I'll be doing something similar values dot description now I'll be passing this updated task to it uh now to keep T script happy let me just check it so this is okay and this has to be also changed it has to be update task I guess so now this is done now we can come to column and for the add button add task button we we can add a function here now add task this is going to take a column ID let me create the function this is going to be the task logic so I'll be creating a different I'll be keeping a gap between all the column logic as well as task logic so add task is going to have column ID and this is going to have basically uh I'll first create couple of variables which I require one is going to be selected column ID we'll be needing the column ID for the task related scenarios let me create it by defa it's going to have empty string as a value then we're going to have a task action reactive variable also which is going to have actions by default it's going to have actions do add task and here what we have to do is like we need to come selected column ID is going to be the value equal to column ID task action in this case it's going to be add column anyway you can just ignore it uh by default anyway the column when by default it's going to be anyway mad because I'll not be doing anything else uh you can ignore it sorry about that so in here you need to have the selected column id. value I think I did mistake here should be selected column ID value then I'll call a function called toggle task model this basically going to I'll just create another variable for this this is going to basically let me just copy this only you can be more specific but I think this should be enough because in the colum we just going to be allowing the add functionality only so it's last Model active not it should be visible I guess I think it doesn't matter much so anyway let me come here and just give it is class model active do value equal to just make it reverse of it so I'm going to call the toggle task model now I need to just come here and take the column Forum one copy it and just modify it this is going to be as task model active save this has to be add task these both are going to be toggle task model the name is correct I guess yeah then we need to basically write here task form let me just replace it pleas start it so task form is going to have it doesn't need column it needs colum ID which I'll pass using selected column ID which we already created an action is going to be actions dot R task now let me see if I have missed anything and it also needs have task so task is going to be no it doesn't need to have task because we are just going to be creating it so let us see the output something should be not visible at least not visible at least addition should be done because we have not rendering it till now so if I click on it I'm able to add a task let me open the local stage also refresh it let me see the column as you can see one task has been added now we need to create a task component so that we can render this task inside the conv B I've went ahead and created basically added a basic markup of task now we can go ahead with this so first of all transfer data is going to have couple of things it's going to have let me copy it from column itself I just modified it's going to have task ID and since there's no task ID we need to basically in a script let me create the props just take column and just modify it I don't think it's going to be anywh here so let me first of all write task we going to get a task from the column itself then we'll be needing column ID also so task we can get from here task ID and type is going to be task let me import types so this is fine I guess in here we need to have the task name task do name and here we need to have task. description by the I've made a code somewhat reusable so that you can extend upon this project and have make the task have a lot more stuff instead of just having the name and description other than that we have this edit and delete so I'll be having couple of let me just copy most of the logic from there itself we already have a lot of logic plan in column so let me come here and copy the form first of all let me just copy this itself copy and paste then I need to copy and paste this also because the edit and delete functionality is going to be present here so I have to first import model then I need to import task so this task mode active I'll just keep the name simple I just use this only and also have toggle clas model which again I can copy from there itself and this is going to be update task actions I think has not been imported so actions is going to be update task because task is going in this task column in this task comp we are going to only do editing and for column ID selected doesn't need we can pass the column ID itself from the props action is going to be the update task again we can toggle it for delete instead of delete column model I'll be having delete task model and let me just copy this paste it let me call this where is it toggle delete task model this is going to be a name for this and this is going to have task and task. name uh whenever we delete column we need to need delete task here and this is going to be soorry this needs to be delete task model active this needs to be toggle delete clas model I'm just basically replacing wherever we need it just to write L code here because most of logic we already have WR in column and that's what we're using here delete task we need to basically call Conan store. delete task here we need to just pass the column ID which I'll get from prop got column ID then I need to pass the task ID which is going to be from props task. task ID that should be fine I guess yeah so this is fine now we need to have on task drop let me copy this just to be safe what I'll do is I'll check it on pass drop I'll be getting a transfer data here let me come in the columns here I'll just copy this code more I'll just copy yeah I'll just copy this much and just modify it let me give you on pass drop let me import transfer data and just remove everything here so now mostly I'll be having this scenario only to tackle types is going to be task and I need to now move the data again move task again but this time I would be needing a Target task ID also uh I think I need to add that also so Target task ID is going to be from props task. task ID from the transfer data we'll be getting the uh details of the uh task which we are moving towards this task towards the current task hence the current task props is going to be the target task ID and transfer is going to be the uh task which we moving so this should work fine let me see if I missed out anything oh yeah I missed out a couple of things we need to basically click on toggle and edit so for toggle I just call this function this is basically for editing the task it's going to make it open and go delete again something similar I think I'm not missed out anything now let us see the code now refresh okay I did not render it now let me come back to column and render them so the rendering is going to happen here I guess somewhere let me create a d for it also this is going to be V4 task of column do task then I need to pass a couple of things one is going to be the column ID it's going to be column do column ID then I need to pass the task itself which is going to be the task and since in a V I'll just I'll give the key also to it task do task ID save I went Ahad and basically added the stylings now for this task now let us see a demo of it whe it works fine or not so first of we'll try to delete it no is closing fine yes nothing is happening it seems let us see it's in task view I guess so here first of all we need to toggle also basically close it other than that delete task let us go what is happening here this is going to get the column if the column is not return column okay I need to B filter I've created anothera so I need to reassign it this should work fine now let us see Let me refresh it yes gone now again we can create one more task task one description now we need to edit it I think there's an error here let me check mounted hook task form yeah it should be [Music] column this needs to be task form which you already have here on the top and as one more thing I think I'm missing out something let me come back to task when we send a task form we need to also send yeah here we need to also send task save now let's see again refresh edit yeah task one is there now I if I modify to task two description to D2 submit it's working fine let us create one more uh task T2 description to now let me create a column in progress now let me drag them the dragging is not working okay we need to fix it the column dragging there's something wrong going on too is working fine uh there are a couple of issues we need to fix first of all on the dragable I think I said something I did something else but we need to basically have drag enter here now drag end similarly for dropable also since I copied pasted it here also drag enter and uh it's weird we need to not listen for drag start we need to basically add drop we need to listen on that other than that let me see let me check couple of other places also if I'm passing the correct things or not so column is going to have transfer data transfer data is going to have what col ID task ID where is it now when we move the task in the types. task u in the task we are not passing column ID but we need the column ID here in here so we need to take it from props I'm doing it in the top but I'm not sure why I did not do in bottom below so this has to be column do column ID similarly now we need to check for task Al ones task also this is going to be the same thing it also will not be able to have the column ID obviously so we'll need to have use it from props column ID other than that I think let me check the conven also for move toask and move column so for move column I need to do this Target column index will be index let me take the index from this we checking and we'll be putting the index other than that let me check here also move task I'm doing two Loops here here I need to basically do something oh yeah let do save now let us see refresh I'll create one task one more just to Showcase a different task let me give it T3 DT description now I try to drag it to the column it should be yeah it's correct here also it should be appended it's appended now if I just try to replace it in a T1 location I think I have a debugger somewhere let me move it Let me refresh it again now when I try to take T3 and put it on on top of T3 it's correct this is expected Behavior now let me take to do in place of in progress It's fine okay it's working fine it seems okay sorry for those hiccups on the way other than that I'll be having a follow-up video on this also where I think I'll be taking this Canan board and converting into text electron application it will be somewhat similar on the whatever we have done with minor modification if interested do check out the next video as well and thanks for watching till here and bye

Channel: Mohit Kumar Toshniwal

Views: 795

Keywords: #frontend, #frontenddeveloper, javascript, html, css, vue, vue3, tailwind, tailwindcss, monaco editor, splitpanes, clone, codepen, codepen clone

Id: Z5Bo4FIMSO4

Length: 85min 28sec (5128 seconds)

Published: Sat Dec 30 2023