so the next thing i want to do here i want to add a delete button so let's go back to
here and find buttons i'm going to go this one so the table stays there
because i'm probably gonna come back to it so buttons
so here are some buttons this red one should be good alert so let's just copy this button
i'm gonna go to this and i'm not sure are we going to put it above or below i'm probably going to add
it above this whole thing well i guess if i do it it's going to go all the way on top here which
is probably not too bad so let's do that so i'm going to go above this table add some sort of div
and paste the button in here and we'll just say delete
let's give this button some sort of id so we can find it
you want to be paying attention to this cases when you work with html
in javascript this is case sensitive so if i do b uppercase then later on
i have to make sure i refer to it with that uppercase b and everything else the same way
so if i go back and reload this we should have a button now on top
right there good
so now let's see how we're going to delete this so basically at this point if we check
some of these worksheets like this we want to be able to click delete
and delete those from here right now for that we need to first figure out
how do we actually delete worksheets from our spreadsheet and for that we need some
sort of back-end function here under code gs i'm going to create a function
in this function we're going to need a reference to our spreadsheet and let's see what happens
if we do ss dot do we have a method to delete a worksheet or something like that delete sheet see
what does it need from us to be able to delete it
so it's looking for what seems to be a worksheet object okay fair enough so i suppose will then
repeat this line two to get all the worksheets and then what we're gonna do we're gonna filter this
list to just include the worksheets that were basically checked and the way we'll do that
we'll basically pass an array here to this list for now let's just create a variable in here
and assume that's going to be some sort of array and that should have
some of the worksheet names in here so i'm just going to do like sheet 5 and sheet 7.
and using this list i want to filter this list of worksheets so i should be able to take that sheet
and run filter method on that for each worksheet we're going to do a callback function
and basically we need to make sure that that worksheet name is inside of this
list right here so i'm going to say sheets to delete includes that sheet dot get sheet name
so this is gonna get the name of the worksheet then we'll check if that's in this array
and if it is then we'll keep that worksheet in our list so i'll just assign it to a new variable here
actually let's change this let's call this sheet names to delete and pass that over here
and this one i'll call it sheets to delete
let's zoom out just a little bit there it is so this now
should be the worksheets that needs to be deleted which should be this too
so now we can just take that and loop through it
and for each worksheet we'll do a callback and here if you remember this needed the
worksheet object which would be this so all i have to do just move this over here
and just pass that worksheet or sheet right in here and hopefully doing this should delete those
worksheets so i'm going to test this so if i run this and this works it should delete these two
worksheets from here sheet 5 and 7. let's try this delete worksheets i'm going to run that
so it ran let's go check c5 and 7 are gone so this works so what i'm going to change here instead of
hard coding this array i'm just going to pass that variable here as an argument and delete this line
i'll actually just comment it so now we should be able to run this delete worksheets function give
it a name list and use that to delete worksheets just like that so i'll go back to my html
let's actually copy this and here we need to create a function to basically
run that and delete those worksheets and we'll create that inside of this
global we have right here so this closing is closing this so let's just comment this
and i'm gonna do another function here and we'll call this delete sheet
and in this one we're going to run that google script run
again with that success handler and this is going to be the function which should receive this
worksheet names to delete which we don't have yet but we're going to get them in a second so
here i'm going to do a callback so for now there is nothing that it's returning so we'll just do
this and this is after it's all deleted and everything went fine so how are we gonna get
this worksheet names to delete so for that if i go back to this table component let's go to methods
see they have all these methods on that table object and
see there's this method get selected items
that should basically be whatever's checked in here so what i'm going to do right now i'm
just going to comment this i'm going to highlight this part and do command or control question mark
i'll uncomment it in a second so what we should be able to do if we take that worksheets
delete app and reference to that worksheets table that we've created inside of that inside of that
we should have this get selected items method so if i just do a variable here to see what this is
let's just console.log this
now this is going to be console.log in our html so we're going to have to use the browser to see
the console log it's not going to show up here so i'm going to save that now we need this
to run at some point so this is this function delete sheets and that's going to run when we
basically click on this delete button right so for that let's assign an event listener
so i'm just going to copy paste this line this time i'm going to do get element by id
and the id of our element this will be the button and i've called it this delete button
so the event is going to be when we click
on that button we want to run the function and the function is this
so now we should be able to click on a button that should run this function and that should
hopefully go get our selected items and we'll do a console log to see what it looks like
so i'm going to save this go back reload this thing
and what i'll do i'll just select this this this click on delete and then i want to look at
our logs so i'm going to right click because this is an html console log and inspect
and go to console section in my browser and right here in the bottom we're gonna ignore all this
stuff above see we have this array if i open it see it's an array and it seems like it's an array
of arrays see we have all of this worksheet names in the structure so when i created that function
it was accepting a regular array not a ray of arrays which is what i have here so i'm gonna
have to convert this to a regular array and i should be able to do that if i go back to
let's close this this i'm gonna take this selected items and i'm gonna map through that list
and for each let's call it sheet name you know what since this is gonna be an array let's just do
for each row or something like that r it's just a variable name it doesn't
really matter we're gonna get the first item in a row because it's just one column of data
just the worksheet names so if i save this let's go back and re-run the sidebar
and see what it looks like this time i'll do this this and this
click delete go to our logs
see array of three items and now it's not in array brackets so this is a regular array now with three
worksheet names see this one sheet four and sheet nine which is what we have selected
and if i go here and select like this one and click delete
see we got this new console log and it includes that too good so we're able to get our worksheets
to delete so i'm going to get rid of this console log and i'm also going gonna uncomment this so i'm
gonna do control question mark to get this back and all we have to do is just pass this to this
by providing it with those worksheets we should be able to hopefully run the function and delete
whatever's selected so why don't we just save this and see what happens and go from there
so i'm going to go to this and reload this thing
now let's check for example six and eight
these two and click delete and see what happens
nothing good let's try to look inside of our logs to see what's going on
it says fail due to illegal value in property so it looks like what it's not liking about what i'm
doing is that i'm passing an array to our back end and it's not too happy about that i assume
that's what's going on we're gonna see in a second so what we'll do i'm gonna go back to this and
instead of trying to pass an array to our function we'll try to convert that array
to a string and then pass it to our function so what i'll do here i'll add another line
and i'll do const and we'll do sheet names to delete as string and what i'll do i'll do
json.stringify and we'll pass this array to this function and this is a global function well global
object with a function that basically is able to take our json object and basically convert it to
text and that way we should be able to pass it to our back end right here without complaining
about it now the problem is going to be because we convert this to text here when we get back to
our code this is not going to be an array for it to work with so it needs to be converted again to
an array from that text so let's just call this as string and what i'll do i'll uncomment
this and change this to json.parse and we'll parse that string and make it back to an array
like this and with that we should be able to get around that problem so let's take a look
and see if i'm right about this so i'm going to save go back reload the sidebar
check a couple of this 6 and 8 and hit delete
okay they're gone so that worked so we're able now to delete the worksheets but there is a
problem here see these two names are still in here so when this deletion is successful
we want to basically get rid of these worksheets from here we could just go in and delete those
lines from here but what i'll do instead i'll just reload this thing and to reload it we'll
go back to our html now that's gonna happen after we run this see here and it's successful
so we're gonna be right in here in this line 54 if that went through and it was successful and
if it was then i want to basically render all of those items all over again by basically doing this
so what i'm going to do because it's just this part of the script not the whole thing
i'm going to move this part to its own function so we can call it from both places
so i'll go right in here and inside of that global we'll create another function we'll call this load
worksheet names or something and that will be a function let's just comment this
so we know what this is for i'm gonna actually do that for this one too
otherwise too many brackets okay here i basically need to do this so i'm going
to grab all of this code cut it and paste it right in here and we should be able to run
this function get the worksheets and set the items and reload so that's fine so at this
point i should be able to run this function right in here after we get the reference to the table
so i just moved it to a function now i should be able to now run that same function copy that
right in here after we delete the worksheets to reload the items with new worksheet names so let's
save this go back and test this out and see what happens so i'm going to go back rerun the sidebar
let's just try this with the sheet nine hit delete
see it's gone from here and it's gone from here too it reloaded now i want the sheet 10 to go
that's good so now we have this thing that allows us to check the boxes so if i add more here
there's going to be a little problem here because it's not going to automatically
load this as we have these so we need to reload the sidebar
to get those in here see there's page one page two so we should be able to now for example
check let's say 18 16 and then 11 from here and if i delete that should delete those three looks good
that's nice