Transcript
Looking for something specific? Feel free to search the page for keywords to find a specific portion of the live stream that interests you most.
there we go okay we're up are we yeah okay good
all righty uh so we'll be picking up today where we left off last night um which was last night we kind of altered
the future table flow a little bit so previously we were planning on having post series
topics but we've since changed that last night to post collections taxonomies
and then we went through set up those models and those migrations um
and now today well we also got the crud for the collections working so now what
we need to do is actually allow for posts to be bound to
collections so that's what we'll be working on today and so we'll be placing that right
over here and the main thing i think that
don't ever mind um i was gonna say i think we need um the
collection to actually be created before posts can get bound to it but uh we can work around that actually and
make this doable all in one so let's go into the creator edit page and let's go ahead and start stubbing out what we
want this to be so ideally it would be some kind of autocomplete
but we don't need to start with that necessarily out of the box um instead
well yeah why don't we so do we have anything um auto complete based
in here i do not believe we do let me go take it well on the last one i
was using view so let's see here well why don't we do a simple select so we'll
do at form input alt and then for
the data for it um let's see we're going to do a type of
select well no you would want it to be typable so we'll do type of let me go take a look at the input real quick
so we have your basic input maybe we will need to
make an autocomplete type field and why don't we do that so we'll use this
as a group so the type will be a group and then we'll do at end
whoops and then we'll need to do add slot input
and slot and then within here we'll lie our auto
complete um and we can actually give this a label
and everything too so label will be
[Music] posts sure so we'll start with that we can see that
we have our posts here with no form input and then let me go find an autocomplete
js auto complete nope don't want jquery
autocomplete.js maybe so what i'm hoping for is something that
doesn't actually
usage input id okay you have any
examples of what it here's a demo
that should that should work okay so we'll plan for that
so let's see this would be input with an id
of post autocomplete and we'll just end it like that for
right now and then we'll go ahead and install this so let's go into the installation copy this
okay and then
usage so we need an id
and then we need the script and then it takes in the config okay
so within our scripts here since this is specifically
going to be for well we can do it down at the meh we'll do another script for it and
won't hurt anything so studio will do collections.js
we will import i'm assuming we're gonna it's
probably a default export i would assume i didn't see anything with the import statement in here
so import autocomplete from who was it at
uh it had a weird at yeah right here
i don't know if it was we'll use autocomplete within visual studio code to finish that up so we'll do that do
and yep all right that's full autocomplete.js there we go
hey augustine thanks for stopping by um and then
we need to figure out what all it takes within the configuration so let's see selector would be the
selector so we can do um const
post autocomplete equals new right
new just go back yeah so since it's new and i'm hoping that that's a default import i'm going
to go ahead and capitalize that so auto completes
selector would be at post
autocomplete and
then yeah i need some way to tell it to grab data
we could pass that in on load or we could have it filtered
down i would prefer the back end to do the filtering so
let's see if maybe yeah async there you go data source
all right and then we grab it and then we return it gotcha
it's a data source oh was that a function yes all right
async take some kind of query
okay that's probably the search query we'll have to see exactly what that looks like um
and then keys data object key to be searched
so the key for this i'm going to put that above source would probably be name well no it's post
so that would be title actually okay so now we need to create some form of autocomplete search for the post but
first i want to see exactly what this query is i assume that's probably just a string
but it would have to be like url safe the way that they're using it right so let's see what exactly it is so
console.log query and then that will also allow us to see whether or not this autocomplete
is taking to the post at all so we need to add it to our webpack
config since this is a new file
studio dot collections
and resources js studio
collections.js i believe so we have this save and
i think we need to restart the server whenever we add in a new entry
so we'll do that as well
and then we need to actually add that post um that script onto the page
so i'm just going to copy and paste the one that i have from here yeah
onto here and instead of studio post editor it's
just to do the collections okay so let's
check and make sure that that's loading in we have our post or our um
input over here and
i want to just mmm doesn't look like it's overwriting anything with that
well that's a babble thing if i remember
right
yeah babel polyfill let's see he's got a butt there's always
a butt
well i'm pretty sure last time i just went with the battle polyfill so even though he says deprecated i'm gonna go
up least that's a temporary fix and i can't even spell it right there's no
i don't know why i figured there would be an out there
all right and then within
that particular script
um i know that there's a way to like have that apply everywhere with webpack encore but for right now we'll do this
just to make sure that everything's working with
this so we no longer get that error which is good
and now that input is of writing stuff on that normal input so that is at least working
so let's see if we can type something in and get oop all right
yeah that makes sense because we're not returning anything um i want to do a full-on test so testing
with a space and it looks like it had that space in it yeah so it's not necessarily url safe like their um
thing here imply so i'm gonna pass it up as a query string um
i think so we'll do something like uh
let's wrap it up in a try catch well no i want the error to come back while we're developing it so i won't
quite wrap it on the try catch yet so const posts equals weight
i will do data pardon me i still use axios i know i
should use fetch but i still use axios axios then we'll do get and then this will be something like api
posts um search or something of the sort and then we'll pass it well this should
be tilda all right we could do it yeah
all right now we'll do that and
term equals uh query
so we'll see about that and then
return data dot posts try that to start
and then we need to actually go create that input or route so do routes and then we have our posts right
here actually that needs to also be within studio so api
studio posts there we go so we have this basic api here for the
assets so far so we'll tack this inside of here as route.group
and then we will scope this specifically to the studio so prefix studio
as studio route dot get
uh what was it posts search i think
and then this will go inside of the posts controller oh wait we need to name space this as
well um so let's see this should be app uh
control uh controllers http studio i think
let me cheat look at this one app controller yeah okay all right and then we'll do
let's just do search on that
and then we want to go into that controller so post controller
do this just below and we'll do that at the bottom
public async search so we have a request and then we're
going to have a response http context contract
all right and then let's see to get a particular query string let's
see what is that so const term equals
request dot i think qs gets the whole
query string yeah object um we could do that and then we could
accept like a sort but
let's see i think is it only
get value of specified keys no i think that's off of the body
[Music] which one is it
i think it might be input request body or query string there we go
that's the one i'm looking for term otherwise it should be an empty string
um and then we'll want to just query using that term so const
posts equals and i'm just going to do a like a simplistic query it doesn't need to be anything fancy
um awaits post dot query dot where
uh sorry title is like
the term and then that also needs to be
percent term percent
okay so we'll just do a simple title search on that um and then maybe order by
descending
the uh publish it hey
and then we will just return those back
so we'll do posts and then it doesn't yeah we don't need to do a
message or anything like that so we can just return back the posts okay
and we already made the route for that right so we can go ahead and test that out
so i'm going to just refresh for clarification here
well we're still getting in there or no it's okay it's sending it off but that's returning back at 500. so what be the
issue okay so it's something wrong with the
namespace how i can i find module
code app controllers http studio post controllers
oh did i do post controllers whoops
sure enough it's a single controller full of multiple controllers all right let's try
that again all right so uh do we have any posts
that's going to be an issue let's create some test test posts real quick all right um
this is a test post doesn't need to be anything fancy
another test post and we'll do one more that doesn't match anything with the
previous ones so we'll do yeah
all right so we have some test posts it gives us some stuff to query off of
and then within our collection here we should be able to do
if we search for test oh i saw an object show up all right so it looks like the search is
so yeah that comes back empty but this one came back with something
um i did name them test didn't they like two of them had tests in it
test and test okay
oh i bet you it's capitalization probably all right well let's test it with out nope still
doesn't want to show me up on that
oh no it is coming back just doesn't want to display and then
it's also showing it as object like if we take back to just t it's showing it as object object so
oh keys is supposed to be an array okay so that might be the issue because i
just put it as a string i think so let's see yep sure enough
so let's wrap that up in an array and let's see if maybe that fixes
this no it's still out there did it refresh it should have but we'll check make sure
yeah it's still object object interesting um all right i guess
the next thing to check would be to see exactly what i'm returning back so let's console.logoutdata.posts
make sure that we're just getting back the array of the posts
so we got two here so yep sure enough all right
so it probably has some sort of thing not within there that's specifying or searching for value and
key or something like that value id
something of the sort so let's see
result item
hmm let's take a look at what it's doing for this string so
for that it's just a string for this yeah
we have title am i putting that in the right spot data keys
data yeah keys
there we go okay that's better um
cool so now that's showing up so one problem solved there
cool so they persist and then if we do another if we just do a
cool so that seems to be working next we need to like handle the select so those are
definitely like they don't even seem to be selectable
um
so i'll just let's see results list
rendering interception and customizing so
okay i'm gonna go ahead copy that
let's try so that probably outside of data so it's probably like here um
destination it's probably something that it's i'm gonna leave destination off it
should autofill that i would think with whatever it's using [Music] and then
here we're going to want
i think that's it so that it's like at least selectable um and then i don't know whether or not
we're gonna need to like put an ant click on that or if there's gonna be some kind of let's see yeah there we go all right so
that's at least appearing clickable now um let's see if there's like a
but we're also going to want new results open next previous go to select
select the result i know from the list it should do that automatically that you would think that's just to do it programmatically
but definitely if i type that in it doesn't even want to autofill the select with it
so
is there any examples just steal one off of their example
styles plugins playground maybe
yeah here we go so let's see they are doing
all right
well i'm gonna copy and paste all of this um and i'm gonna paste it down below
um so here's ours and i'm gonna paste this down here
because i don't know what all oh it didn't do any formatting ah wow
that's a lot too oh that copied way too much
yeah that copied the whole thing there we go
all right now we'll pluck out what we need out of here
ah so let's see here
get rid of all of these comments all right
and then we'll tack this on to also we'll replace
this with jesus pete
they really didn't no there was not this much in there was there no i okay evidently i didn't get rid of the whole
thing last time or did i copy the whole thing again no okay that's definitely not as big as
it was before
okay that's better so we'll go ahead and
let's see i used mine with a capital a lowercase c and let's get our data grab in place of
their data grab
turn data.posts okay and our key is just title
we do not need a filter our back end will be taking care of that
everything else let's just go ahead and save and see what we get uh oh we need the selector in there too don't worry so
selector do they have a selector in there that i need to overwrite it doesn't look like it so we'll add that in
okay so let's comment ours out
okay and oh we got some we got an error
canon access property at event listener document.queryselectors null but which one is it
it could be a number of them um let's get element by id i i think
why don't we go ahead and just use the default like what what what what are what are they they're probably just
using autocomplete as their id on their input i would assume that's what it is yeah
okay so this would then be um
posts autocompletes posts
auto-complete any others i mean i got a lot of stuff in here
okay let's give that a go still all right what line are you on
110.
document query selector add event listener so there's no toggler i don't know what the toddler would do
what's the tackler doing there example oh okay mode yeah
uh augustine asked can you show me the project you do yet are you do you mean the project that we're working on
um we're rebuilding jaeger the site that i host all my posts or
content on um so like i don't have an end result but this
is ultimately like what we're rebuilding and we're going with different styles and a different approach with it this
time um so that's kind of what we're doing so like the home page is all hard-coded at
this point but it will end up looking something like this um and then we'll have a post page and all
that that we're incrementally working on so there is no finished project with this already i'm kind of just working
through this as we go um
so we'll get rid of this toggler we'll see if we run into an issue with that blur on blur i don't know what that
would be for either
okay no error so let's try this out so oh now we got in there
title is null
oh okay so const action equals action the blur on blur we can get rid of that too
i'm just gonna go ahead and get rid of this as well i think that's related
okay there we go no error but we are not getting any results
either that or it's just like up here that might be absolutely positioned or
something like that so let's see if no the list is empty
well it could be because it's caching it too i don't know how strong their cache is
so come over here we'll check let's turn yeah xhrs on
so no it's not kicking anything out as we type
so let's see what that's all about
i'm gonna get rid of that that might be messing it up
nope still doesn't want to go all right you
let's see
i don't necessarily see anything in here that would uh well there's no query now is there
all right let's do that see if that makes a difference
nope are we at least getting in here
yeah we're getting in there so it's kicking it out somewhere um it could be
actually erroring out right here
let's go ahead and just get rid of it
okay there we go now we're getting stuff
cool all right and then if we select something
cannot access property enter html document query selectors null online 89.
yeah so i mean whenever a user selects something what we're going to want to do is append it
into a list anyway so we need to go ahead and create that list
so let's do so actually what we can do
is um
i what did i i have some form of input that can go inside of
the alt um
i don't remember what that is but so let's do
a let's see
well no you wouldn't want that to be as well yeah yeah why not template with an id of
well we have the list item kind of altered in there already so we'll do ul with an id of
selected posts right
and then what we'll do is we'll just append that list item from the collection into there
so let's see if
all right so let's walk through this here so let's see we have here
are we actually getting the selection or does this thing changed here we definitely know that we need to
change something so why don't we go ahead and instead of query selectoring all of
queer selector um instead of query selecting all of that well i will
do it there for right now i'm just going to get on by id
and what did i name that selected posts
dot append child
um and then we would want to make like a
node for that to actually append or we could just enter html
concatenate a string and we'll we'll do this
well do we
yeah why don't we go ahead and just enter html pin to string for right now so const
i have no clue what selection is yet so we're just going to do selection there
and we'll get rid of this line
and it looks like that's trying to set it to the selection we'll see whether or not that works if it is then i would imagine that that is just like the title
string um so yeah we'll see what what all this is going to do
so we'll do test and then we will select this one
and let's verify whether or not that's the ul yep so that's the selected ones
all right and now what we really need is an id so
let's see what our selection is and then it's also query clearing out the feedback down here so selection is
indeed just a string um feedback though
let's see what the event has in it so
nope that wouldn't be it selection
yeah so this this is what we would ultimately want so it has the value in here with the actual row
record so we want selection value dot id and then
yeah so it's using the key to get the string there so that works for that
so that would be the matched key
oh okay so that's ultimately just getting it off of there so
all right get rid of all of that
um we can get rid of this because we don't want that well actually we want to clear it out
um let's get rid of that as well and then we'll leave that console.log in there for a minute until we have this
working so here what we want is for this to have
a hidden input in it with our post ids
and then it's also going to need to have the collection id in it as well because ultimately what we're going to want
is for these collections to be nestable and so we would have also so that this wouldn't necessarily in the
future will be posts but it will be collections and then each collection would have a post and then you could
have posts directly off of the collection as well so uh to show you an example of what i'm
talking about here so if we go into this wasn't the best implementation of
it especially since the back end isn't the best implementation of it um
but if we go into the series and let's take a look at the let's build nope not let's build the let's learn
um so you can see the modules here which are ultimately in the back end just
well no these are different but in our back end now these are just
collections so this would be a collection and then this would be a child collection this would be another child
collection and then all of the posts would be just off of that child collection
if that makes sense
so that's what we're after
so we're going to want an input type hidden
um we need to determine how we want to maintain this so it would be
named of
um so this one would be collection id
but it would be an array and then the value would be
for right now whatever collection we are in which i don't think we have anywhere
currently accessible
we do not so actually we can leave that null if it's just directly off of the parent
for right now anyway um so we'll just do post id here and that one will be an
array and the value there we do have and
that's going to be
feedback selection value id if i'm remembering that correctly
and then we would have the actual label off of it
and then we can use counters um on css side to count
so we don't necessarily need to put well like an index based counter on it
um i don't exactly remember how those work well to look those up but to start with this should work okay
so let's try this again let's do t select that nope
selection is not defined
oh yeah
okay
there select you now all right well that needs some
oh that's the input why isn't that hidden i did too oh i didn't i did not oh my bad
so yeah that should be a type hidden okay let's try that one more time
so t there we go so now we have that and then if we were to save this we would now get with our data
post ids i don't know why i'm doing an underscore there actually that should be just let's do post id
okay i'll probably do post ids there we go so within our
collection validator post ids
schema string nope sorry array
um and that should actually be optional because you don't necessarily
need to have any posts and then members
schema.number because we'll just be sending up the ids and then
number needs a rule of exists
for the table posts and the column id
okay so we can go ahead well
then we need to try and persist it in order to actually test and see whether or not it works but we could just console.log out our data
so let's see we'll start with edit and then we'll go back to create since we it'll
be easier to test it out with edit that we don't have to create a bunch
uh okay so sorry update i mean
so on here instead of trying to append the post id in with the collection merge
we're going to want to extract it out of the data so it'll be post ids and then data would then be a spread of
the rest and then we want to do something like if
post ids dot well no sorry uh then we want to do awaits collection related
there it is posts dot sync and this will definitely change in
the future because we need to actually get the sort order to save but for right now just to test things
out let's do post ids let's just pass it no
why argument of type number array or undefined it's not assignable to a parameter oh okay
gotcha there okay so we'll test that out we'll see we
can also toss a console.log up just to make sure that we're getting post ids as we expect
but i believe that should work so we'll test it out here let's do t we'll tack two on there
another thing we need to do is uh remove already selected once so i guess we would want filter for that
to remove already selected items from the autocomplete or we could pass up like an array
array of extend or ignore ids on here as an additional query string i
think that would probably be the better approach though the back end is doing everything so let's go ahead and try saving
okay we won't have it auto populate yet because we don't have anything querying but if we check out the database
and see where we need to check collection posts there they are we have
two with the post id of one and two on collection number two so they seem to be saving so the next
thing to do would be to get those to auto well we can also check out the console log as well make sure everything came
through yep so we get rid of that console log
and whenever we actually go into edit a collection now we want to also query
those posts
for our collection so we'll do just a simple load i think
and we don't have it in place yet but we'll go ahead and put the order by the sort order on here just so we have it
there
our order by pivot sorry right isn't that a thing
um thought it was
let's see
oh
let's see so we have pivot foreign key pivot related form key pivot table pivot columns
am i looking in the right spot nope that's i'm sorry that's not the query uh query builder here we go so
maybe not maybe we i don't forget it's been a while
select project user dot role as pivot rule oh yes all right
that's right so it would be pivot sort order on here because i already have the pivot
column defined on the model so query dot order by
pivot sort order we'll at least see if that works well we can't quite test it yet because
nothing's different with the sword order but we'll test it here in a minute so that should get them loading into the
edit page so then on the creator edit
what we need to do is go ahead and plot those in here
um
this will be each post in collection.posts
and we can do i i think we can do that
or well let's just wrap it in an if and make it a little bit cleaner
okay and then we'll do the same thing that we have going on on that script so it'd be an li
with an input type hidden
um name of post oop post ids as an array
and the value is the post dot id
and then just a post up title rendering out there
and then end li so now if we save this that should be a
way to kind of auto populate it because those post ids will now be
within the form and there they are it's not pretty to look at but it should
work and we need to add in a way to actually remove them as well
so why don't we go ahead and do that um div class flex
just justify between
okay and then we'll do button type button
do that for right now oh oh i didn't get the red oh
um let's see what does that need to be 700 yeah that works all right so it's not
pretty but again should work and then that would just be
we need to remove the whole li so
why don't we do this instead let's move this up to here get rid of this div altogether
i don't think it this input should mess anything up oh okay so then all we need
to do is
unclick this
parent element.remove i think
so if we click on this yep there it goes it's away and then if we save
that should have synced it so it would have removed um i think it was this first one here with
the post id of one yep so it's gone and then if we go back
in and edit this there we are we just have that one left
so that seems to be working as well so let's go ahead and get this to where
if we type we don't get a duplicate response of something that's already selected
so let's see here how do i want to maintain that
i think something that would be better is if we turned this
into an alpine component instead of relying on native javascript
that way we can actually hold all of these within an array
instead of having like the template defined in two different places
so i am going to pull the collections over
to the right hand side i'm going to get rid of the old autocomplete that we had there
and
let's see if i can remember how to do this um actually i'm going to pull up
the file manager here so that i can cheat off of it because i alright so it's just a simple function that returns
back an object all right so we'll do function um
collection post manager
that takes in posts which will default to an empty
array if it's not provided and we'll have this return
is there like an unmounted hook or something like that for alpine because that's where we would probably
want this stuff to register and it would be great to have that
within the life cycle of alpine so let's see
alpine js hooks
life cycle there we go in it okay
do i need to explicitly do that within data though or can i do that like within the function approach
i would assume you'd be okay to do that within the function approach right
all right let's give it a go let's see if it works so is that i guess that would be within
the return as like a function
in which case we would want to i don't all right let's wrap this all up in
well all right let's cut it out since we know that that works as one and paste it with another knit
okay and then um
i think what am i doing i'm plopping that on the window yeah that way we can call it from within the template
and then this would be called collection post manager oh i'm okay
collection we'll do it as that naming so i'll alter this one to match
lowercase c okay and then let's see here we want
this to have posts which we will default to posts
that's passed into the function arguments um probably going to want some kind of
loading state and apart from that
i don't know we'll start with this all right
results actually yeah let's do results as well so um or options
okay so then my hope would be that
within here let's see we're using an arrow function so my mind says that should be okay so
let's do this dot um
loading equals true
well no i mean it's this component here that's going to take care of those options
would it not be easier to just build this on my own at this point then like
yeah i don't see why not well you have like the arrow controls and all that with the drop down don't you
no i'm not seeing any
no yeah okay we'll we'll progress so this dot options equals
data dot posts and then we'll go ahead and just return back data.post there
and then we should be okay to get rid of the results list
no no that's the that's the actual visual representation of the drop down
uh it's this result item i think
no maybe not i need to spend some time to
figure out exactly what those are for all right but it's on this selection here we actually want to get rid of some
stuff so um it's mostly just right here so we would
want to do this posts
oh no all right so this needs to be an arrow function
now this needs to be this dot posts dot push
feedback dot selection dot
value i believe and we'll just have that be the whole
list of the posts okay
that should be okay and then over here on the view side
what we would want to do is instead of doing this we would want
this wrapped up in a div
with x is it init or
data i think it's it's x data isn't it i think so and then we called a function
so that would be collection post manager and provided
the posts which we'll do here in a second i just want to get this
pasted back in first
and then this would be from edge as
collection collection.posts and then i think we need to stringify
that as well so with the um
view or the asset manager i went and just did json.string if i but
i'm pretty sure that there is a helper to string five with adonis as well
oh yeah right here yep so we just call stringify there
and that should work so stringify
okay and then instead of manually looping over this with edge
we would want to switch this to a template x4 [Music]
post in posts with the key of post dot id
and then right here we want to do well that was if right here we want to do end
template and get rid of that if all together
um decrement whoops decrement and then
this needs i don't know if they do the um curly braces so we'll do x text post
dot title and then this i know needs to be like
that and then like that
and i think well oh the air click needs to change as well so
this would change to act click equals remove we need to add that in or delete
it's just the right spot it sure is remove post and then we'll take the post
in
okay
so give that a save and we'll give that a test let's see if it works
all right collection post manager is not defined
um
did i go and name it right so collection post manager window.collectionpostman
so it seems the same uh let's see i'm going to get rid of this side
and let's make sure that that script is actually plopping on the page okay it might be that the script's not there
well no the script would be there because it was working before so it's right here
it could have something to do with the placement though um let me take a look and see exactly where i had it on here oh it was outside
of the screen yeah so it's probably something with the placement because within the scripts is where alpine is added so i think this
needs added before alpine so it would probably be in the prior
section right so here so we're headed oh no it was in scripts it was outside
of the script though i think did i have this inside of the script no i did not
okay well then that just takes us right back to where we were
all right let me check and see is it x data
form file manager let's check and see what we're using in there so form file manager
x data yep
oh that's actually importing it just like that so
we could do that as well we can move this into a component called autocomplete and make it reusable
um i don't know if that would we would need to like plop it out into its own thing again whenever
we add in the module system so we'll leave it separate
um i do have a feeling though that
it's something with it being called before alpine or something like that
collection post management's not defined but i bet you it's on the window
post minute out post manager yep so it's there
it's just not to find when it needs to be so i need to figure out where it doesn't need to be defined at
you
there we go okay all right
yeah okay so it's back to working cool cool cool so if we add another one
into this still work so if we had test back in yeah okay all right so i just need to be helping
with it so i'll probably split that out into its own thing
um okay
now i lost my train of thought um
oh right we were gonna make sure that the uh items were unique within the search
so if we head back into the script right here
we can add get ignore ids
that returns back this posts dot map and it just returns back the id
so that would be an array of those ids and then what we would want to do
is do and ignore
and then we can actually let's do const ignore ids equals this dot get
get ignore ids.join with a comma so comma separate them
and then we'll do ignore ids
okay and then up in our end point
for the post controller we can do
const ignore ids equals request
input
ignore have that default to an empty array
or empty string and then split it
by the comma so then we could also do then
a where not in
the ignore ids are you an array no you're in any
but why would that be in any why does split return back in any it doesn't make any sense
oh oh oh okay um
is what array array whoops
here's a ray um let's see
if there is let's see if array dot is
array ignore ids then we'll do
if we'll do it with an if on the query array dot is array
ignore ids then we will do query
query dot we're not in and then we can make this be an array
by spreading it right
oh yeah okay now let's expect to get two arguments got one because we need to specify the id there we go
let's see do we need to spread still no okay it seems happy without it so
okay cool so that should be good um i'm gonna give that a save
and try it out so we have another test post already defined here so if we type a
all right cool that's not coming back you can verify that it's one of the ones that's already listed i know it's kind of hard to tell but by the x over here
and then the actual results have title um it's a little hard to see but so it seems to be working if we type test it
does not come back if we select this is a test post and then we type test again
comes back as zero matches so that seems to be working if we remove them both
and we type test we get back a 500.
so all right i have to imagine that's something to do with an empty array being provided for
the ignore
invalid input syntax for type integer yeah so whenever we split the empty um
yeah
so why don't we
what is well i don't know
because if you have an empty string and you split it it
turns it into an object array with uh yeah
so i mean we could tack on a filter there to get rid of empty strings
but it seems a little redundant
does filter boolean do that i don't think it does but
because it's still an empty string on there okay yeah turn it into an empty array
see there you can see it's an empty string okay so we'll stick with that that
should let's refresh to get rid of those errors
so if we get rid of you and we do test there they are
okay so this seems to be working all right now
um we want now that we have that working we want these to be
able to work for modules as well so we should be able to create another collection within this collection
so this is where things can get a little
messy so let's see
we're going to want to take this component up a notch
outside of the input
okay so now you are inside of the input
or the um that component and what the heck happened to the
indentation here all kinds of flopped up
okay and this would just change from
collection post manager to just collection manager because now this is going to maintain
collections as well
okay
um and then we're going to want something
like a button in here to add a new collection
um
yeah i think that's right
so i don't know something like that and sub collection um
and then this would be not just an array of selected posts
but
let's do collection items instead i think that's a little more appropriate
well no hold on a minute so we're going to want the post autocomplete to definitely be
specific to we're going to want it for the
root collection but we're also going to want it for all of the sub collections as well
so whenever you create a collection i think we're going to want this to loop for each collection but then
we're also going to want it to be at the bottom of the collection itself
so this would be template
okay and then we're gonna have that inside of each one of those but we're also going to have
um another ul that would then nest these within it
oops so i pasted that too soon
well now the ul would be outside of the loop
no it was that that needed okay there we go oops oops
there we go okay there we go all right and then this would be
the sub collection name
i have no clue how this is going to work i know that we definitely don't want these to be alt based inputs so maybe we
get rid of that just i don't even know if we want it to be a group at this point but we'll we'll
leave it as that and it's the same let's give it a save and see what we get
probably in here yep collections is not defined which of course it's definitely not
so we need to come in here collections
which this would want to accept collections as well so
posts specific to a collection are going to be within the collection item post specific to the collection that we're
editing so this collection will be with over here
in the sort order we don't have this touched at all yet will match as well so you can have post
subcollection post sub collection so the sort order will be inclusive of them
all i think we'll touch that last because then we're going to need to merge the arrays into
one another in order to make that happen which should be interesting but we'll
figure it out probably do like a computed property that just merges the two together based off of their safe sword order or
something like that okay so now what we need is the click
function that actually creates the collection so here add collection
i'm going to collapse this in it
here it was add collection with it
and all this does is creates a collection it doesn't take in a name or
anything like that you can alter the name afterward it will be given a base name so
data equals weight axios post
api studio
collections stub
and then this dot collections
push data dot
collection okay so let's go create this api studio collection stub
okay and then the collections controller
do this right underneath the create because that's in essence what it is so store
public async stub won't need anything off of the request
because it doesn't take a name or anything like that but we will need a response oop what the heck
http context contract okay so
nothing to validate all that we need to do is await collection.create
and we'll give it a name of
something like your new collection um owner id
is oh we do need auth there we go
off user id um what else on data up here
we don't want well it won't need a slug at all
but we'll let we'll let it do its thing um
collection type id status id state id none of those apply to this
but those are not nullable but they should have a database default so they should be okay um
so that i think that should be it and then all we need to do is return response dot
oh we need we need to get back the collection so that we can return it
okay json collection so that's it that should be it i think
so if oh that needs to be async okay
there we go uh is that iterator a new error so yep
that's applicable iter is undefined
why all right so that
uh
let's take a look at the actual collections so oh oh
okay did a coal in there instead of an equals
all right um different error this time is that still applicable
nope okay something with hot reloading i guess so if we click it's a giant button for this
but uh again right now we're not after pretty we're just after working ad collections not defined so it's not
getting the function name it's probably something with the button um
i don't think i'm going to want to use that button anyway so i'm just going to not use the edge
component button and instead let's just do an actual button button so that we can do that click
add collection
okay so it won't look like a button it'll just be text but it'll actually be a button that if we click
that uh oh i need to set a type on it type equals button so that the form
doesn't submit on me like it just did so if we come back in here i have no
clue if that just created a collection so i'm going to go test and see or not test but check out the database
and see so let's do collections
all right nothing in here with the name your new collection or anything like that so it shouldn't have
or did i refresh yeah no okay nothing with the name your new collection so we're good so if we
now we click add new collection there is our new collection
oh the one thing that's missing is it needs to be bound to this
collection so it needs the parent id so that is one thing that we do need to send up with this
and we need to pass that in here so parent id
should be and i'm going to break this down because we also need to add in the collections to this as well
parent id should be available
collections dot id or sorry collection dot id
otherwise we want that to be null okay
and then
well that should be okay because it would come back undefined and it would fail the truthy check anyway
okay and then we went to collections as well so collections and that one will be stringify
collection dot collections i think
is that what we named or did we name it children let's go take a look at the collection table and see what the
we have parent oh there is no children so we can't load that we need to do a separate query
is there a way to do that i'm trying to think
not off the top of my head i can't think of a way to do that i don't know i've never tried it before
so what i'm thinking is like to where you do public children and then you would say like
find the parent by this id i don't think that exists i think we have to query it separately which is no
big deal
let's see here so on well first let's so we do want
the request so that we can get back the parent id here so let's do
const well we could use the validator as well that way we get back an error saying that something doesn't exist we
can check to see whether or not it does exist so const data equals
await request dot validate
schema equals do i have that imported
now
create i'm just going to do this online since we only should be really small
parent id schema.number
rules.exists dot table
collections column id
okay so then we would just merge data in
to that and then what was the other thing that i needed to do
um
shoot there was something i got distracted with this one that i was headed to do
what was it ah fudge
there was something in here oh the query um
okay so on edit because we haven't done create yet i have to go back and do that
so on edit edit edit right here uh we need to query for the um children collections as well so let's do
children equals um a weight
collection well here so no we can't do related now
can we collection dot query dot where parent id equals collection dot id
border by the sort order okay and then let's add children into
this okay and then down here
where was that oh right up here so it won't be collection.collections it will be um just
children and that needs to come after it okay
so oh select star from collections where parent id one or yeah
order by sort order sending column sort order does not oh right it's pivot sword order my bad
okay nope oh
hmm
because there is no relation there it's the issue right
all right
um
no there is no sort order yeah no oh we're gonna have to add that aren't we
yeah we're gonna have to add that
so collection to collection whenever a collection has a subcollection we need a way to order it um
because these are going to be like the modules where you separate a collection up into different sections
so we have the parent id but we don't have a way to sort them whenever they do have a parent id so we need table dot
sort order on here um
we'll make that nullable i think well
not nullable defaulted to zero and then open the model
okay um
so what i'm going to do is i'm just going to comment this offer right now just so that we can continue on make sure that this is working and then we'll
go back and refresh the database it's definitely not all the data needs to persist
but we have that prepared for whenever we do refresh so we have that collection that we just
created that didn't get bound to anything so now if we click this we get a 422
where's the actual here's the okay let's see required parent id
did i not add it i must not have added oh i added it um
here but i didn't actually add it into the script
yeah i didn't add it in here at all
we'll put it on the data just in case but i don't think it need to be on there at all but it doesn't hurt
okay so that should be it all right let's refresh to get rid of
those errors and add new collection there it is so
now we should have a collection that properly has a parent id so if we refresh this
we have that junk one that got the null of parent id and then we have this one that's properly bound
so that should be good and then you can see that our posts are looped
they're loop-de-looped um so we need to change the one where the collection i need to here let me add
some hierarchy to that
let's see oops accidentally clicked so let's come in here and where we have
the collection name um i'll just make that bold for right now
there we go so this is for the collection
this is for this collection so this sub collection this main collection
and then eventually we'll merge them into one another so
we need to separate this out because this should not have a post bound to it at all yet
so if it's within here
we need to alter what we're looping over so instead
of posts here it should be sub collection
dot posts which then we run into the issue well we're not loading that so let's go load that
so within here let's drop this down
i'm going to drop down the order by comment out too and then we'll do preload
and we should have posts within here and these posts do have a sort order
already so we'll do query dot order by and i believe this one would be
pivot sword order so we give that a save now we should have posts
coming through and if we save this that should now be yup so now this is
empty it doesn't have any posts but the collection as a whole does have a post on it
okay now we need to alter this to say hey whenever you select a post it needs to go to this and not
this so let's take a look at that
um okay
where's the actual so yeah another issue is these are both gonna have the same id
so
let's think for a second here
let me change that to just use a class query selector um and then within the init on selector
you would change to
collection of posts did i put it oops did i put an s on that in here or did i
just do collection of post no you didn't collection posts okay good
okay so let's check it should still be there
refresh make sure that yeah okay so that's still there this one's not binding though you can tell because it doesn't have the um placeholder on it
so that might only be doing
it could be because it's within a loop um
and maybe a net is before like ready
let me go back and look at the life cycles here and see what else we have so we have data in a net
oh it looks like that's really it just dated a net there's no like
mounted or anything like that
yeah like if you're talking view um okay
well
so we know that the selector's working because it's still coming on for the second one
so we know that that's still good
what if we put this inside of a next tick is that this does have that right
oh i got another magics ooh would it be this then inside of the function
probably try and see what happens
okay well so it is only happening to one because
now this has it but this one doesn't that's interesting
because it like it most of the time if they accept a selector they'll do it to all that apply to the selector
yeah no that that is very much so only for one isn't it so it says
um function that returns an element
so we need to call that for each instance of it
so and anytime that we add in a new item evidently
so uh we'll split this off into a function inside of here um
and we're gonna need a way to pass specific whoops let me take the next tick with me
we're gonna need a way to pass a specific selector into it or we're gonna need to
alter again how we're specifying the selector for specific collection
so init autocomplete
we'll need the selector of some kind passed in
okay all of that should be self-scoped um
yeah all of that should be okay i think it shouldn't shouldn't hurt anything
and then we need to provide the selector there
so here this one would be this dot and knit autocomplete
for the main so i guess we'll name this dot
autocomplete main or something like that i don't know
so this would be id
i didn't and then we would understand to do it
again for each post or each collection sorry so this dot
collections map
and then we'd probably do
something i guess oh let's make these back ticks
c dot id give that a save come in here and then we need to change this to match that
so this would become id no it was what was it autocomplete
collection id
okay see if that works
there we go all right now they're both highlighted up
cool now the next issue is
if in here we type another it's not going to show up because it's selected down here so we
need to change that ignore to be separate based off of the autocomplete as well
so i'm sure there is a better way to
structure all of this but we'll move forward with what we have um
let's see how do we want to do that so that's within the init autocomplete
yeah it is and it's grabbing it using this ignore
ids which is grabbing it if i can find it um based
off of this posts so
why don't we pass in a second that is the collection so if collection
is null we want to do it off of this post if it isn't null then we want to do it
straight off of the collection
so or we could just pass in the collection id i guess right
that way we don't have to worry about mutation off of this object or anything like that so
collection id um and then
shoot where's the selector oh yeah and then we'll just bind it based off of the selector so if collection id
then we'll do what was it auto
complete collection collection id
otherwise it will just be
auto complete main yeah and then here we would pass in
just empty and then here bc.id
now i like it the old way past and selector then pass in the collection and then
we'll just grab the collection id off of the collection
so c and then
get ignore ids pass in the collection into there
and then we'll do if
collection return this dot
find or shoot this dot collections dot find
get it off of this instead of that way we don't have to worry about mutations on this particular object getting
outdated c dot where c dot id equals
collection id dot map no
dot all right let's
do c equals and then we'll return
c dot
yeah otherwise just return this off of posts okay
and that should be that should be that should be good okay
all right so now if we type another there it is and if we type
another down here it is not so that's still working cool
and if we select this is test post that's the next thing that we need to do because now that's adding it on to the main
and not necessarily the actual collection so that's the next step so let's see our selection
right down here
so the same sort of thing is going to apply here um if we have a collection add it onto the
id otherwise add it onto the posts so if we have a collection
sorry that should be post.push
what am i doing doing a dance there we go so that should be all that we need for
that i believe so now if we do test and we select this one
we're getting there how fun what's the air cannot access property posts
oh yeah i did this.collection collections yeah and then we would need
to find it so there's a little bit more to that than what i let on so let's do the top one
as that we'll do not collection i'll do the else and then we'll do this dot
collections well now let's turn this into a full if
is it is it collections on this yes
nope that's gonna have naming collision
there we go all right
so now if we do there we go now that's working
oh yeah it's still capitalization based all right
all right now it looks like next we need to do remove because that's not working that would make sense that we would need
to add that in there so uh let's see it should have its own remove
post call
so that should be easy enough we should just be able to pass the actual collection in so let's see here
remove post post and then if we're inside of a sub collection it
would be sub collection passed in as the second argument so if oops i had that selected
since that's directly what we're looping over you might just be able to delete it right off of there let's see
i don't know we'll see if it works
yeah that seems to be working
cool okay i didn't actually know if that would work but i guess that is being watched well
enough cool all right so let's give that a save and let's see if things auto-populate back
exactly as we have it here
no not quite so they both saved to the actual collection here and not to
that makes sense because the id's the same on both
so how do we want to name that so it's it's
uh where are we it's this right here causing an issue so they're all going into this post ids
array on the input field so ideally what we should be doing here
is separating them out somehow um and you need to separate them out by the
collection as well so let's see we definitely want these to
maintain post ids
put them inside of an object i don't know how you would do that with a form naming though
could do an array inside of the array i don't know how you do that either though um let's see
it's been a while html field nested array name
i don't know yeah something like that is that
possible indexes okay yeah i can do that
that's a-okay to me provide the id so we'll do that so um
now what i don't know is if we can mix and match like have these be we'll do
these different so we'll do collection sub collection post ids
and then we'll have these be the sub collection id and then that will be
a nested array okay i like that that sounds good so we'll do name
and then we need this instead of here so this will be
sub collection dot id then we need to add sub collection post
ids into the validator i don't i would assume that this is going
to be an array where this
the id is the index and then that's going to have an array inside of it so that might be a little
messy picking out i don't know we'll see how it works could be perfectly valid
i honestly don't think i've ever actually tried this before so let's see how how well it works so sub
collection post ids schema dot it's going to be an array
it's going to be optional it's going to have members of an array
so here let's drop that down so schema dot
array dot optional
and at this point we would be at the post id number
now i don't think this level would be optional because if you have yeah i think maybe we'll leave it there
rules dot exists
table posts column id okay
break this down too just so it's a little bit easier to see okay
i'm gonna just console.log that out and see exactly what we get so that's going to be on the update
so collection post ids then i'm also going to do
test and grab it off of the request as well
just in case the validation does fail at least this way we'll have an additional console log showing exactly what we're getting
um
is it input input's the one you're looking for input
okay so now that we have that let's drop a
console log right here we're not going to worry about persisting i just want to make sure that we're actually getting the data at this point in time so let's
do console.log sub collection post ids test
so we'll console log both of those out
and let's give it a test so
this one should not be on there well let's go ahead and refresh just to make sure we have the freshest data so we'll take that one off and we'll try putting
it back up here so test this is a test post
and let's try saving see what our console log looks like
the validation didn't fail um so sub collection post that uses an array of an array with one
and test is an array of an array with one so not quite what i'm looking for because
like it doesn't i don't
there's no real index um so like if i came into here
really the parent id is two and like how am i going to discern that
that is two based off of you know like that would be an index of zero so
uh let's see mr ivantic said hey there just wanted to pop in and say thank you for all the effort you are putting into this
really enjoying the series and content thank you so much i appreciate that um and
no problem at all with catching it on on demand later i just appreciate you guys support
um so i need to rethink this because that's not quite working how i wanted it to
work
so like if we could specify a specific id there
would be fantastic i think the way that we would want to do that is via an object
but i don't know if you can can you like you probably cannot replace that with
that i would imagine i've never seen that before so i wouldn't imagine that it would be a
thing
let's see yeah i'm
probably not going to get any good search results for this search um
let's see here
now we could alter it so that like it's
yeah let's do that so i'm overthinking it so let's take it back to that right
no let's take it back to this let's determine how you get the index in
alpine because i just i don't know how um i don't think it works like view where
it's the second argument if it is then
well that would be nice but oh it is okay great i'd
has it always been i used to think that it was more like angular right it had a specific key
okay so we'll get the index we'll keep the same approach we'll
replace the id with the actual index and then in
addition to that we'll do that twice so we'll do input type hidden
name
so that'll be the post
i don't know
okay let's try that see how that works so collection collection ids needs to be
added onto the validator it's going to be very similar to this
except for it's just going to be for collections and for the most part it's going to be
duplicated so let's see array optional array optional
number collections
id at well yeah the sub collections they will be created
um why are you red squiggly oh because the name's the same i didn't
change the name yet so subcollection collection ids okay let's give that a save
and let's um
post ids
okay so collection collection ids
oh duplicate name take an eye in front of it
i don't know it's all for testing so it doesn't matter anyway okay and then we need to extract
subcollection collection ids as well
and okay let's see if that works back into here back into there
and add this is a test post on to you and we get
in there literal not terminated before end of script my bad
which one is it this one yep okay
all right so let's give this a go so test okay let's try saving
okay what did we get so sub collection post id
has an id of one and then subcollection collection ids has an id of nine
so that's right the collection id is right
and then this is a test i think did have an id of one for the posts
yep so okay that might work um the
bad part is is then we're just looping over similar indexes so it's not as clean as i'd love it to be
but it'll it should should work okay um
so let's get rid of these console logs let's try persisting it see how we
how we get so we'll maintain the post ids for right now as the main collection posts and
then for each
do it over the post ids so um
four let i equal zero while i is less than sub
collection post ids i plus plus let's do
oh dot length my bad uh it's optional right so
ah yeah i get that it's possibly undefined
there we go okay all right so for each one of those we'll get the index and then we will loop over
it so const collection id equals
sub collection collection ids i and then const post id equals
sub collection post ids i and these are possibly nullable so we
will do a check so if not sub collection collection ids i or not
sub collection post ids i will get hopefully this will
will that make typescript happy no
there we go that does all right let's do that
uh that would be better to do outside
why do that for each loop when you can just do it once
and then we'll flip it okay
it should be all right to get rid of that since we are now checking to make sure that it exists
okay there we go took a big circle to get here but we're
here all right so now what we want to do um
is bind these together so we want to add the post to this collection so
um what's the most
best way that we could do this without querying the collection each and every time so we could group them
first before we loop based off of the collection that way all
we need to do is for each collection do a you know add many or whatever
or what um something like that or sync it to each collection as opposed to adding it for each collection each
post so let's do that um const
collections equals new set so let's get all of the unique
no
let's go ahead and just do let
collection post map equal an object
and then for each one of these let's do collection post map
collection id push post id
if not collection post map
collection id
then
all right why are you red oh wait you're a number
are you a number array
are you a number right you are a number how are you a number ran
all right let me take a look at the console log so
all right let's add in more to see what this looks like with more
um i'm gonna go back to where we have the console logs
right here okay and then let's dive into
here come back into that collection um
and let's add in yet another new collection it's going to have the same name it's a biggie we need to fix that
to where it reinitializes it whenever we actually add one in so refresh to actually make it initialized and let's
add a test post here and here
and then to this one we'll add two so um
okay so there we go so now we have two collections one with one and one with two so let's
take a look and see what those console logs look like okay
so that's exactly what i'm looking for yeah okay my mind just wasn't wrapping around
in the right place so we get the index there
which matches nine what nine and ten and then ten
nine in ten and then ten so those are already grouped right two one three
yeah so you just need to get the ones that have the same index they're already grouped so you take this index and then you take
this index now
nine and ten and three
what's got me confused is i was expecting to see 9 9 10.
because like the index should be the same
right
for the one that has like it's grouped in the same array no
maybe not so it was the second one that had two in it
the first one had one
three was on the second one
but the second one had two on it hmm
really
interesting okay let me try that one more time paying
more attention to what's going on so let's do
another test here i'm going to remove it completely from here
and let's do this is a test post there
and then we'll do asdf there
and then let's take a look at what actually is on here so we have our li
both of these have the index of zero on it
the value here is nine the value there is two
and here the index went up to one
but oh no we want the index to be up here
so let's do x and i don't think we'll need y but we'll put y right there so this would be x
x okay that's better so now let's try it out
let's see what's going on here make sure that this is right so
do that we'll get rid of you here and we'll do both of the test ones up there and then we'll do asdf right here
okay let's take a look at it now
so now it's zero zero with nine and two
and zero zero with nine and one so there we go now that would be posting up as
nine nine like i would it was expecting it to the first time and then we would have two one
now i don't think this needs to be a sub
array i think we can simplify that on ourselves by just getting rid of that all together
and allowing the index to do its thing there so we can manually define the index to
make sure that it's the same but i think i don't think we need that to
have a sub array on it so now if we post this up so let's try this
one more time so test and test
oh did i miss click i must have test and
asdf okay let's make sure that this is still looking right before we post it so
zero zero value nine nine um
in hindsight that could go outside of there too right like that doesn't need to be inside of this loop it should probably
be able to go up here
and it would still apply to it so that should be okay um
yeah okay so let's actually post it this time
so test another test test this is a test post and asdf
okay save and we don't have any anything actually saving but
we do get two one which the first one had two and
what the heck nine ten
still getting back the same freaking thing for that
no no oh something failed anyway oh yeah
because we removed the array from validation so that's probably the old
console log from before which would be why it would still be the same and then we just failed validation so we never
even got to the console logs because we removed the array
from this subcollection collection id so we just need to get rid of one layer of the
array okay so now let's try this one more time all
right so another test this is a test
and asdf okay and let's save that
okay that actually succeeded there we go that's more of what i want
index one on the collection gets us the array of two posts
index or sorry zero um and then index one gets us the array of one post
that's what i wanted so now
hopefully i didn't yeah good so we can go forward with this
back to where we were okay we shouldn't need to do the mapping
now because this is now working as we want okay so we get the collection id so this
should actually just be a string yeah or sorry a number and then this should be an array of number
or undefined yeah cool so instead of looping over the posts
we'd want to loop over the collections since if we loop over the posts we would be querying the collection more than
once and applying the collection update more than once but if we do it off of the collection
where things are defined only once then we can grab the post array and sync
using the entire array of the posts so sub collection
collectionids.length okay and then we would do const collection
equals a weight and then actually we can simplify that not simplify but we can make this even
more efficient by taking it out of a for loop and into
something else and maintaining just uh promises so that they run in parallel instead of in a serious fashion
so we'll do that here in a second but let's get these saving first so const collection
[Music] equals find or fail
by the collection id
and then we would want to await collection dot related
posts dot sync and then we're going to want to do the in the sort order here
so this will be a little bit different um trying to remember exactly so i think it's an object
and we're going to want to actually um loop over them for that so
this would not be a single post id but rather post ids
okay and then let's do const post
sync data equals post ids reduce
previous current index
start this off as an object okay and then let's return
an object spreading the previous where the
current because no current we would yeah current
and then it would be another object with sort order of i
so we can simplify this actually by getting rid of that and wrapping it
in this there we go okay
so what that ends up looking like is um here let me do a multi-line comment um something like this so we'll have an
object where the post id is here and then within there it has sort
order zero and then this one would be another one oops sorry
then we have another one with two with sort order of one so that's kind of what
we're doing so these are the post ids and then we save it with the intermediary table data that we need to save as the object off of the post id
so that's what we're doing here that's what we're building with this reduce so then all we should need to do is pass
and post sync data into u something with null i bet
argument object or undefined is not assignable to a parameter of type string or number
i'm doing the same kind of thing over here so let me take a look real quick oh no it's in the sink assets
yeah that looks the same
it's it's okay it's the fact that i remember now it's the fact that this is knowledge
um that should fix it there we go okay
so i think that should now persist things um let's give it a try
oh before we do that let's clean this up so we can make this run in um parallel
instead of in a series as it's doing now because now it's going to loop over it's going to await right here the finder
fail and then it's going to await the sync as well and then it will move on to the next one
and then it will wait again and then we'll move on to the next one but we can make it to where it can kind of run these all in parallel
you know instead of awaiting and then going to the next one by using promises so
since we don't need to get any particular data back from this this will be a relatively easy switch so we'll do
[Music] sub collection collection ids
dot map okay and then within here we'll just
loop over it so this would be the collection id
and then inside of here all we need to do is take that stuff there we need to change this
into an async function
and
we need to return a new promise
we'll take resolve and then we can pop this in here
and then at the end of this map we'll have const promises
and then we need to just call resolve once we reach the end of that
uh oh no this is the one that needs to be async sorry
you don't need to be and then you are now back to the issue to where you can be nullable because we
don't have a check on you so we'll do if
well we can wrap this whole thing up an if and then this will be a prime candidate to move off into a service
so if not sub collection post ids
if yeah no there we go okay and then why is resolve not happy
because it accepts an argument we don't really need to pass anything into it so we'll just pass true
and then down at the bottom of our if we'll do weight promise dot
what is it all are all settled
i think it's all i don't remember the difference and then we'll just await those promises
no argument of type promise unknown or
undefined is not assignable to a parameter of type iterable unknown
sorry about much here um oh okay
there we go when in doubt always assume it's an issue with it being nullable
okay so then we don't need this if at all so we can get rid of that uh now let's test it
so we'll come back into here nothing would have saved with the previous because we were just console.logging out so let's go ahead and actually do it now
so let's put both of the tests on this first one
okay and then we'll put asdf on the second okay so let's go ahead and hit save
wow that bombed that that did a hard bomb i is not defined
isn't it no it isn't is it my bad there we go
let's make i happen again there we go now i is in there
and test
test and asdf
all right that no errors so that seems good
um see if it pre-populates back with that and it does
fan flipping tastic
so outside of the stream i'll worry about making this prettier you guys don't need to sit around for
that but let's go ahead and test the additional crud of it so if we remove another test post from
this first collection let's see whether or not that persists
it does if we add it on to this one
let's see if that persists it does
and then the next thing to really do is to merge these posts
somehow into the collection of these collections
i don't know how the best way to go about that would be so i need to think on that
um and then apart from that once we get that working we would want to do drag and drop so that you can reorder stuff
which that shouldn't take too much time once we have this all in a similar in a single array type fashion
um so yeah
that should what are we going on here
about two and a half hours so i think that we'll call it there for today
and we will progress onward in the next stream and i will have an answer
for how we want to approach merging the parent collections posts
with the child collections because we should be able to do you know a post and then a collection
and then a post in the collection uh i'm a little bit baffled by that
right now i'm sure there's an easy way to do it but i need to play around with it and get a clear head around it so
uh thank you all for stopping by watching and for all of your support as always um and i'll see you guys the next
one have a great week
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!