@aaron-ford

The onSubmmit transform did what I needed, thanks! It's been a while since I've done some of the lessons, so I forgot we'd done that. As always, thanks for the help!

Yeah, that sped it up. I was using numbers since I thought it would need to be a number for the vine validation, but it seems to work. The one thing I can't get the validation to work on when using a string is enums. I read that using v-model.number can force it to be a number, but I haven't been able to get that to work. Maybe because FormInput is a custom component that doesn't support the model modifier? Is there a way to to get a FormInput to transform a string to a number for the backend?

I should have checked the component to see if it was modified. Thanks, I have it working now. If you make a video on the filtering, let me know. An omni search would be great, like being able to search by a string and get a list of items where the id/name/description or similar fields match. There's a lot of pages I'll want to have some kind of search/filter on. Hopefully I can figure it out going through your code. I think you've mentioned you already have plans to do a series on testing in AdonisJS, which will be nice. Thanks again for the help!

Are there more lessons for PlotMyCourse other than the building with AdonisJS 6 and Inertia? Or are these changes you made outside the course for your personal production repo? Looks like there are a lot of interesting and useful things I can reference for my own project. The numbered links work for me, but using the arrows to try and move from page to page or jump to the start or end don't work. I'm using the fromPaginator as shown above:

const props = defineProps<{
    users: SimplePaginatorDtoContract<UserDto>
}>()

const users = ref(props.users.data)
const paginationInfo = props.users.meta

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

And I copied the pagination from the production PlotMyCourse repo, replacing the lessons.meta with paginationInfo. The UI updates and highlights the right numbers, but there must not be a link being generated to actually change them. Hovering over them shows no link, but hovering over the numbers does. The controller is adding the start and end as directed:

async index({ request, inertia, auth }: HttpContext) {
    const page = request.input('page', 1)
    const paginator = await User.query().orderBy('username', 'asc').paginate(page, 10)

    paginator.baseUrl(router.makeUrl('users.index'))
    //paginator.queryString(request.qs())

    return inertia.render('admin/users/index', {
      users: UserDto.fromPaginator(paginator, {
        start: paginator.firstPage,
        end: paginator.lastPage,
      }),
    })
  }

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

I've been going through my code and comparing it to yours. Other than the fact you use an action to get your pagination based off supplied filters, it seems similar from what I can tell. Any idea why the links wouldn't generate?

Thanks! I am using your dto package, and had just stumbled upon the knowledge you had built the fromPaginator function into it, but this helped me get it working. I have the initial results showing up, and the links on the bottom (though I have to get them working now). It looks like Shadcn has a pagination component, so I think I'll try setting that up.

When is AdonisJS 7 coming out?

Thanks for your help!

That fixed it, thanks!

I am getting an error from the SettingsShell.vue, I am guessing it is from changing the tailwind config. I have gone back over the last lesson and this one, and I haven't found any differences in the change I made vs what you made.

[postcss]

/plotmycourse/inertia/components/SettingsShell.vue?vue&type=style&index=0&scoped=9c23e674&lang.css:3:5: The text-primary class does not exist. If text-primary is a custom class, make sure it is defined within a @layer directive.

Everything works except the delete. I get

delete from organizations where id = 3 - Cannot delete or update a parent row: a foreign key constraint fails

I feel like maybe I had something like this in a previous lesson, but can't find it. Is this something with how AdonisJS handles relationships in MySQL? Do I have to alter the code slightly to properly delete related modules?

Awesome! Thank you!

Sorry for all the questions. I am getting a lock timeout error when I try to delete. I copied your destroy_lesson code from the repo to make sure our files matched and still get it. I get it trying to delete any lesson. I built my DB fresh and reseeded, just in case. If I remove the await decrement lesson I can delete lessons just fine, just for some reason the lessons are locked when trying to increment:

ERROR (5078): update lessons set order = order - 1 where (`module_id` = 1 and order > 1) and (`organization_id` = 1) - Lock wait timeout exceeded; try restarting transaction.

The query looks right, it seems to be trying to update the right data. Any ideas?

Thanks! I found it. A typo… was missing the in organization. That's why you don't code late at night.

The line

statusId: props.organization.statuses.at(0)?.id

works fine in my SortableModules, but in the SortableLessons, it is breaking the page due to 'Cannot read properties of undefined (reading 'statuses').' I have looked through all the files I thought could be related, but haven't found any differences. Any suggestions on what could be causing it?

Thanks. Just a note, I tried npx shadcn-vue@radix add table and it failed with an error 'Failed to fetch base color from registry.' I had to run it with a version (npx shadcn-vue@0.11.4 add table) to get it to install, despite the many warnings.

I found npx shadcn-vue@0.11.4 add table, that seems to install it, though it does give a bunch of warnings:

npm WARN EBADENGINE Unsupported engine {

npm WARN EBADENGINE package: 'undici@7.4.0',

npm WARN EBADENGINE required: { node: '>=20.18.1' },

npm WARN EBADENGINE current: { node: 'v20.11.0', npm: '10.5.1' }

npm WARN EBADENGINE }

npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.

npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated

npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

I'll try and continue with this, but if there's a better way, please let me know. Thanks!

It looks like shadcn updated recently to use Reka instead of Radix. I tried following the upgrade instructions at https://www.shadcn-vue.com/docs/changelog#update-your-project, by adding

"ui": "~/components/ui",
"lib": "~/lib",
"composables": "~/composables"

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

to the components.json file, and then trying to reinstall the components, but I still get the same message as before:

An invalid components.json file was found at /plotmycourse.

Before you can add components, you must create a valid components.json file by running the init command.

Learn more at https://shadcn-vue.com/docs/components-json.

Should I just delete the components.json file and run the init? Or what is the best route forward for continuity with the course?

Is AdonisJS set up to handle soft deletes? If you didn't want to replace the difficulty and maintain the original relationships? Or if you wanted to delete a course or organization for some reason, and not lose any records you might have to things like users grades?

Also, I feel like I've occasionally seen warnings in the code that I think are due to FormInput type group (remember me on the login page) not having a label or a v-model attribute. Should a group type have those attributes? Or should they be made optional in the FormInput's defined props?

Thanks! I simplified it by adding an is_default column to the organization_users table.

Is there a simple way to query on a relation's relation? For example, if you wanted to have a setting called 'default organization' defined in a settings table, and you assign that setting to a user in a user_settings table, can you query the related organization where the user's user_settings.settings_id = settings.id where settings.name = 'default organization?' Or would you just use joins on anything more complicated than one relation away? Hopefully that makes sense. The purpose is to set it up where if there's an active organization Id and the user is assigned to that organization, use it. Otherwise, see if they have a default organization Id set in their settings and use that. If those both fail, grab the first organization from their list.

From a UI perspective, if someone has a lot of organizations, would you just let the list grow long, or is there a good way to limit the dropdown length and have the menu scroll after a certain point?

Thanks!

I think the button color is coming from inertia_layout.edge. I might have installed dark mode or something in my initial setup, but if I change it to match yours, I get a bunch of errors. I might just ignore it for now. I don't know if that affects the red color of the error. My app.css matches. Thanks for the help!

When you say we might want to add a referrer policy to this page, how do we do that?

I have

<Alert v-if="exceptions.E_INVALID_CREDENTIALS" variant="destructive" class="mb-6">

but the destructive doesn't seem to change my error to be red. Any idea why? Also, my buttons have always been purple instead of black for some reason, maybe that is related?

The import for the UserDto works fine in my inertia.js file, but it can't be found in the AppLayout.vue file. Did I miss something? I tried going back over it and I think I followed all the steps.

If we want to define single or multi column indexes for our tables, do we do that in the migrations files?