maelstrom-cms / toolkit Goto Github PK

Describe the bug
If there are nested submenus and you select a Link at the lowest submenu, some of the nested submenus will not remain open if they do not have a url associated with them. In my case, I have it set up with
Submenu
    Submenu
        Submenu
            Link
When I click on the Link, the only Submenu that remains open is the last one.

To Reproduce
This is what I used to create a test sidebar which reproduced the issue.

     [
                'type' => 'SubMenu',
                'id' => 'admin_user_menu',
                'label' => 'Users',
                'icon' => 'user',
                'children' => [
                    [
                        'type' => 'SubMenu',
                        'id' => 'test_menu_1',
                        'label' => 'test 1',
                        'icon' => 'folder',
                        'children' => [
                            [
                                'type' => 'SubMenu',
                                'id' => 'test_menu_2',
                                'label' => 'test 2',
                                'icon' => 'folder',
                                'children' => [
                                    [
                                        'type' => 'Link',
                                        'id' => 'user_add',
                                        'url' => '/admin/users/create/',
                                        'label' => 'Add User',
                                        'icon' => 'user-add',
                                    ],
                                ],
                            ]
                        ],
                    ],
                ],
            ],

Expected behavior
All submenus submenus should remain open instead of just the last submenu. I believe the issue is with Sidebar.js component in the source code. I believe the main problem is with this condition

if (
            this.guessSelected &&
            itemUrl &&
            item.selected !== false &&
            window.location.toString().indexOf(itemUrl) !== -1
        ) {

The Submenu items do not have a url associated with them so they never pass this condition and are never added to this.defaultOpenKeys when they should. However, the last submenu will get added because it is the parent of the selected Link.

It is entirely possible I missed something so if I did please let me know. I will also provide more clarification if necessary.

I’m trying to use a TextLinkColumn column type to provide a link to a specific route using an attribute from my models:

            [
                'label' => 'View Docs',
                'name' => route('web.docsets.show', 'slug'),
                'labelText' => 'View Docs',
                'type' => 'TextLinkColumn',
            ],

If I set name in the array above to just 'slug', then I get a relative URL (it appends the slug to the current URL). If I set to route as above, I end up with null/empty href attributes.

Is it possible to generate a link to a specified URL using an attribute from each model?

Thanks

Describe the bug
When one menu item is a child of another, the parent is incorrectly highlighted when on the child page.

For example, given these two menu items:

1. Navigate to /admin/pages and just the first item will be highlighted, as expected.
   

2. Navigate to /admin/pages/create and both items will be highlighted incorrectly.
   

[
    [
        'type' => 'Link',
        'id' => 'pages-index',
        'label' => 'All Pages',
        'url' => '/admin/pages/',
    ],
    [
        'type' => 'Link',
        'id' => 'pages-create',
        'label' => 'New Page',
        'url' => '/admin/pages/create/',
    ],
]

To Reproduce
Steps to reproduce the behavior:

1. Create a sidebar with at least two elements, one of which has a URL that is a child of another
2. View the frontend
3. Click on the link for the child URL
4. Both child and parent menu items will be active.

Expected behavior
I expect that only the child element would be active.

Screenshots
See above.

Additional context
This may be an error with the Ant sidebar, but I haven’t been able to narrow it down yet to that or Maelstrom JS.

We’re using the CMS in an app that requires static code analysis scan. The scanner is reporting usage of dd as active debug code as in CWE-489

Any thoughts about changing that to Log::error() and/or throwing Exceptions instead of using dd? I’d be happy to test and submit a PR.

Describe the bug
Mass-deleting objects fails, and instead tries to create objects.

To Reproduce
Steps to reproduce the behavior:

1. Set up a basic Maelstrom project as described in the documentation.
2. Create a migration/model for pages with a non-nullable name field.
   2 Add multiple pages.
3. Go to the pages index webview.
4. Select multiple pages using the checkboxes.
5. Scroll to the bottom; in the “Bulk Actions” dropdown, choose “Delete selected” and hit the thumbs up button.
6. See an error about MySQL name field not having a default value—rather than deleting the pages, it’s trying to create a new page and failing because the database isn’t allowing a null value in the name field.

Expected behavior
I expected the selected pages to be deleted, not an attempt to create a new page.

Screenshots
See error stack: https://flareapp.io/share/67O9Nkmr#F55

Cannot Add new category
get_class() expects parameter 1 to be object, null given
To Reproduce
Steps to reproduce the behavior:

1. Follow the instructions in installing
2. Go to settings->categories then click "Create Category"
   Fill up the fields then press save

want to change the language, now I don’t know what to do? Can you help me?

Describe the bug
I made a clean installation with Laravel 8 and the installation of authentication with Breeze

I was following the site tutorial below, I noticed that it has some outdated functions
https://www.maelstrom-cms.com/getting-started/installing.html#fresh-install

So I found in GitHub the example used in the video, it would be good to upgrade on the site.
https://github.com/maelstrom-cms/documentation/blob/master/examples/blog.md

However, when trying to install, it presented the errors below.

When you try to install, and run the "NPM RUN DEV" command displayed the error below.

Then I moved to
mix.js("resources/js/maelstrom.js", "public/js");

And then presented the following error.

So I can not install and use Maelstrom.

Could anyone help?

I'm using a custom sidebar with some items that have names that are longer than what is displayed in the sidebar. Currently it seems that the sidebar is set at 210px but I'm not sure how to change that value. I was wondering how to set the width of the sidebar so more of the name will get displayed?
I did see it is getting set here this.width = ParseProps(props, 'width', 210) in Sidebar.js

I am having issues with the media manager component (maelstrom::components.media_manager) when using to import media to a post.

The media manager works, in that it lets me select the image, though once I select the image the field disappears from the page, doesn't fill the selected image into the form data and returns the below errors in the JS Console:

maelstrom.js:288810 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `MediaManager`.
    in MediaManager
printWarning @ maelstrom.js:288810

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `MediaManager`.
    at createFiberFromTypeAndProps (maelstrom.js:279862)
    at createFiberFromElement (maelstrom.js:279885)
    at createChild (maelstrom.js:269525)
    at reconcileChildrenArray (maelstrom.js:269797)
    at reconcileChildFibers (maelstrom.js:270202)
    at reconcileChildren (maelstrom.js:272666)
    at updateFragment (maelstrom.js:272874)
    at beginWork (maelstrom.js:274546)
    at HTMLUnknownElement.callCallback (maelstrom.js:256085)
    at Object.invokeGuardedCallbackDev (maelstrom.js:256134)

The above error occurred in one of your React components:
    in span (created by Context.Consumer)
    in div (created by Context.Consumer)
    in div (created by Context.Consumer)
    in Col (created by Context.Consumer)
    in div (created by Context.Consumer)
    in Row (created by Context.Consumer)
    in FormItem (created by MediaManager)
    in MediaManager

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ maelstrom.js:275424

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `MediaManager`.
    at createFiberFromTypeAndProps (maelstrom.js:279862)
    at createFiberFromElement (maelstrom.js:279885)
    at createChild (maelstrom.js:269525)
    at reconcileChildrenArray (maelstrom.js:269797)
    at reconcileChildFibers (maelstrom.js:270202)
    at reconcileChildren (maelstrom.js:272666)
    at updateFragment (maelstrom.js:272874)
    at beginWork (maelstrom.js:274546)
    at HTMLUnknownElement.callCallback (maelstrom.js:256085)
    at Object.invokeGuardedCallbackDev (maelstrom.js:256134)

I have attempted re-running npm run dev and I have run npm run prod to try regenerating the maelstrom.js file which didn't work. I did kinda resolve the issue by grabbing the maelstrom.js file from your demo site and that seemed to fix the issue, though I would prefer that the issue is fixed when running npm run dev/prod.

webpack.mix.js is:

const mix = require('laravel-mix');

mix.react('resources/js/maelstrom.js', 'public/js');
//mix.react('resources/js/app.js', 'public/js');

if (mix.inProduction()) {
    mix.version();
}

mix.postCss('resources/sass/maelstrom.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
]);

mix.webpackConfig({
    module: {
        rules: [require('@maelstrom-cms/toolkit/js/support/DontIgnoreMaelstrom')()],
    },
});

package.json is:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@babel/preset-react": "^7.0.0",
        "@maelstrom-cms/toolkit": "^1.0.42",
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0.2",
        "eslint": "^7.3.1",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0"
    },
    "dependencies": {
        "antd": "^4.4.0",
        "tailwindcss": "^1.4.6"
    }

I don't know if this has been caused by something that has been implemented wrong on my end and I'm pulling an old file or if there is some other issue causing me to have a version of maelstrom.js that doesn't work.

I look forward to your help.

Thanks
Cam

I am receiving a 404 when using maelstrom.form-options. All setup as according to the documentation. I have copied the code below for reference. Any help would be greatly appreciated.

Thanks,

Kyle

'form_options' => [
        /*
         * If you want the automatic form options route to register,
         * set to false if you want to disable it or provide your own routes.
         */
        'enabled' => true,

        /*
         * If your using a custom auth guard, you can define it here.
         */
        'guard' => null,

        /*
         * If you need to protect this endpoint at route level or anything else
         * you can provide some middleware, which can abort(401) the request.
         */
        'middleware' => ['web'],

        /*
         * These form options will be included in the AJAX endpoint.
         * We just need to know the "name" of the set, then which model
         * it is you're wanting to return values of, any applied scopes
         * where the value field should draw from and which field should be the
         * name/label field.
         *
         * 'categories' => [
         *     'model' => App\Category::class,
         *     'scopes' => ['customScope'],
         *     'value' => 'id',
         *     'label' => 'name',
         * ],
         *
         */
        'models' => [
            'categories' => [
                'model' => App\Category::class,
                'value' => 'id',
                'label' => 'name',
            ],
        ],
    ],

`

Hi there.
Is there an easy way to show a related column's data in the index table? By this I mean that I have the following model (simplified):

menu_item.id, menu_item.name, menu_item.parent_id

In my index I can easily show the three above columns, but I would like (just for the output in the maelstrom::layouts.index table view) to show the menu_item.name associated with the parent_id. so basically showing:

menu_item.id, menu_item.name, menu_item.parent_id->name
(note that I'm not meaning -> in the php sense, just as a relationship)

Is there a way to use the $this->panel->index('admin.menu_items') functionality, or do I have to build something completely separate in order to get it to show the columns?

I've been having a problem using media manager as whenever I try to upload an image it throws a SQL error saying that the image doesn't have a default value

Describe the bug
When using the nested resource button, the iframe that gets created does not use up the whole space. The width and height get cut way too short.

To Reproduce
Create a nested button with any view will demonstrate the issue.

Expected behavior
The page takes up the height and width in the frame.

Screenshots
Example

This seems to fix the issue when added to the css.
.ant-drawer-body { height: 100%; } .maelstrom-wrapper.iframe-mode { min-width: unset; }