Hey 👋 Awesome project and thanks for open-sourcing it!

I was just wondering, is there a particular reason for using JSON_FORCE_OBJECT flag on json_encode() in the blade template?

<div id="app" data-component="{{ $component }}" data-props="{{ json_encode($props, JSON_FORCE_OBJECT) }}"></

When fully loading f.e. contacts page, Vue shows prop validation errors as the links inside contacts prop is object because of it, and Pagination component expects it to be an array.

Thanks again. Cheers!

no setup with how to run it in last setup

In standard laravel apps I would log failed/successful login attempts via spatie/laravel-activitylog, but the login method used in pingcrm doesn't seem to trigger the events.

    /**
     * Handle the event.
     *
     * @param  Failed  $event
     * @return void
     */
    public function handle(Failed $event)
    {
        activity()->log(
            'Failed Login Attempt: ' . $event->credentials['email'] . ' IP:' . request()->ip()
        );
    }

    /**
     * Handle the event.
     *
     * @param  Login  $event
     * @return void
     */
    public function handle(Login $event)
    {
        Activity()
        ->causedBy(Auth::getUser()->id)
        ->log(':causer.name logged in');
    }

    /**
     * The event listener mappings for the application.
     *
     * @var array
     */
    protected $listen = [
        Registered::class => [
            SendEmailVerificationNotification::class,
        ],
        Failed::class => [
            \App\Listeners\LogFailedLoginAttempt::class,
        ],
        Login::class => [
            \App\Listeners\LogSuccessfulLogin::class,
        ],
    ];

Please help on how can i customise the pagination to show 5 links befor the "..." curretly is showing 10 links.

if i add the ->onEachSide(5) it add it on top of the default 10 links and make it 15 links before "..." .

Hi

I am trying to run it in docker container. I am able to do everything but in the end
I am getting error which says:
md5_file(/var/www/public/mix-manifest.json): failed to open stream: No such file or directory

Any help?

I noticed this in a div on Layout.vue now that I have time to GROK this project.

<div class="w-full overflow-hidden px-4 py-8 md:p-12 overflow-y-auto" scroll-region>
    <flash-messages />
    <slot />
</div>

I can't even find scroll-region on google!!!

Where did you find this? Can you leave a brief message on what it does?

I've removed it and I can't figure out the difference.

Cheers and thanks

I'm asking how to tackle with modal forms and validation.
Currently there is a FlashMessages Component in the main layout but when you have a modal form the errors are shown in the main layout. How you would tackle this?

Can't get my head around... 🙈

When using barryvdh/laravel-ide-helper, if you enable run the meta command it dies here:

  Symfony\Component\Debug\Exception\FatalThrowableError  : Too few arguments to function Illuminate\Pagination\LengthAwarePaginator::__construct(), 0 passed in /code/php/laravel/5.8/pingcrm/app/Providers/AppServiceProvider.php on line 65 and at least 3 expected

  at /code/php/laravel/5.8/pingcrm/vendor/laravel/framework/src/Illuminate/Pagination/LengthAwarePaginator.php:41
    37|      * @param  int|null  $currentPage
    38|      * @param  array  $options (path, query, fragment, pageName)
    39|      * @return void
    40|      */
  > 41|     public function __construct($items, $total, $perPage, $currentPage = null, array $options = [])
    42|     {
    43|         $this->options = $options;
    44|
    45|         foreach ($options as $key => $value) {

  Exception trace:

  1   Illuminate\Pagination\LengthAwarePaginator::__construct()
      /code/php/laravel/5.8/pingcrm/app/Providers/AppServiceProvider.php:65

  2   App\Providers\AppServiceProvider::App\Providers\{closure}(Object(Illuminate\Foundation\Application), [])
      /code/php/laravel/5.8/pingcrm/vendor/laravel/framework/src/Illuminate/Container/Container.php:787

Tailwind: ^0.7.4 or ^1.0 (issue is the same)
yarn: 1.15.2

Calling yarn run dev or yarn run watch compiles without any error.

Calling yarn run prod or yarn run production shows error like this:

CssSyntaxError: /css/app.css:64052:3: Unknown word
    at Input.error (/var/www/html/node_modules/postcss/lib/input.js:130:16)
    at Parser.unknownWord (/var/www/html/node_modules/postcss/lib/parser.js:563:22)
    at Parser.decl (/var/www/html/node_modules/postcss/lib/parser.js:235:16)
    at Parser.other (/var/www/html/node_modules/postcss/lib/parser.js:166:12)
    at Parser.parse (/var/www/html/node_modules/postcss/lib/parser.js:77:16)
    at parse (/var/www/html/node_modules/postcss/lib/parse.js:17:12)
    at new LazyResult (/var/www/html/node_modules/postcss/lib/lazy-result.js:60:16)
    at Processor.<anonymous> (/var/www/html/node_modules/postcss/lib/processor.js:138:12)
    at Processor.process (/var/www/html/node_modules/postcss/lib/processor.js:117:23)
    at Function.creator.process (/var/www/html/node_modules/postcss/lib/postcss.js:148:43)
    at OptimizeCssAssetsWebpackPlugin.processCss (/var/www/html/node_modules/optimize-css-assets-webpack-plugin/src/index.js:73:21)
    at Object.processor (/var/www/html/node_modules/optimize-css-assets-webpack-plugin/src/index.js:13:18)
    at /var/www/html/node_modules/last-call-webpack-plugin/src/index.js:150:10
    at arrayEach (/var/www/html/node_modules/lodash/_arrayEach.js:15:9)
    at forEach (/var/www/html/node_modules/lodash/forEach.js:38:10)
    at OptimizeCssAssetsWebpackPlugin.process (/var/www/html/node_modules/last-call-webpack-plugin/src/index.js:147:5)
    at /var/www/html/node_modules/last-call-webpack-plugin/src/index.js:178:28
    at _next0 (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:17)
    at eval (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at /var/www/html/node_modules/terser-webpack-plugin/dist/index.js:321:9
    at step (/var/www/html/node_modules/terser-webpack-plugin/dist/TaskRunner.js:87:9)
    at done (/var/www/html/node_modules/terser-webpack-plugin/dist/TaskRunner.js:98:30)
    at tryCatcher (/var/www/html/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/var/www/html/node_modules/bluebird/js/release/promise.js:517:31)
    at Promise._settlePromise (/var/www/html/node_modules/bluebird/js/release/promise.js:574:18)
    at Promise._settlePromise0 (/var/www/html/node_modules/bluebird/js/release/promise.js:619:10)
    at Promise._settlePromises (/var/www/html/node_modules/bluebird/js/release/promise.js:699:18)
    at _drainQueueStep (/var/www/html/node_modules/bluebird/js/release/async.js:138:12)
    at _drainQueue (/var/www/html/node_modules/bluebird/js/release/async.js:131:9)
    at Async._drainQueues (/var/www/html/node_modules/bluebird/js/release/async.js:147:5)
    at Immediate.Async.drainQueues (/var/www/html/node_modules/bluebird/js/release/async.js:17:14)
    at processImmediate (internal/timers.js:439:21)

Can anybody help?

Аccording to documentation
Inertia\Middleware it should be added "after any session related middleware", but in the example project is at the top of the stack ? Is this the right place or maybe after \Illuminate\View\Middleware\ShareErrorsFromSession::class (in fresh laravel project)

So I tried to clone the repo, did all the necessary steps, but when I type the credentials ([email protected] / secret) the login button keeps turning. and I can't pass the login formular.

While the RememberQueryStrings middleware is effective, the remembered values in the session are not passed to the SearchFilter component. As a result, a re-visit of the page with the SearchFilter component results in a blank filter form, but filters applied.

Any update to Vue3?

So I'm referencing the example given inside Users to creating and updating images, but I noticed it doesn't really show how to do deleting of images?

I've tried to implement something myself but given the limitations of FormData, I'm not entirely sure the best way to approach it. It would be cool to see an example that shows up uploads of multiple files as well.

Since the problem I've got at the moment is trying to somehow differentiate what files have/haven't been changed. Because currently my form just resubmits ALL images no matter what, even if you just change a text field which isn't great for bandwidth and really slows down the app especially if you are uploading say 10 image files.

I think this will be a good overall example to include as well since it seems like a fair amount of people ask about this on various different places.

Hopefully you can add it!

It would be great if sorting of Columns is added to list

How would you go about clearing a field after lets say a validation error, for example clearing the password field after wrong password is given at login. $inertia.post promise resolves before the props are set so I cant act on that.

Trying to update a record and every time that I try to, it redirects me to the same page but with HTTP method PUT. Which gives me this error.

If the contacts table happens to be empty the Contacts index page will not render because the empty collection is json_encode'd to an array and the Vue component is expecting the prop to be an object.

I found that chaining a whenEmpty after the transform fixes this issue, but it feels kind of dirty...

public function index()
{
    return Inertia::render('Contacts/Index', [
        ...
        'contacts' => Auth::user()->account->contacts()
            ...
            ->paginate()
            ->transform(function ($contact) {
                return [
                    ...
                ];
            })->whenEmpty(function ($collection) {
                return $collection->put('data', []);
            }),
    ]);
}

Is there a better was to get to get the empty states for pages like this working?

Hey, I have something that appears quite trivial in regular vue / laravel that's stumping me.

I have a search field bound to a data element search. I need to use an omnibox style search, which is all set up and tested on laravel and returns a list of objects.

When using inertia post, it gets the correct data but attempts to go to the route. It ends up sending back modal with [Object, Object]. The response looks fine, but I need that array mapped back to my computed property or some variable. However my then or catch keys are never activated.

I tried replacing it with a simple axios.post, but I'm stuck with CSRF mismatch. Is there a config I can use for CSRF token when using an axios request in inertia? Or is there a better way to get data back and populate my list.

Thanks

i have Gone through the code base of the controller and it can be re structured

public function store()
    {
        Auth::user()->account->users()->create(
            Request::validate([
                'first_name' => ['required', 'max:50'],
                'last_name' => ['required', 'max:50'],
                'email' => ['required', 'max:50', 'email', Rule::unique('users')],
                'password' => ['nullable'],
                'owner' => ['required', 'boolean'],
            ])
        );
        return Redirect::route('users')->with('success', 'User created.');
    }

So you dont need the Validation loging while creating the data you can just add the form request and isolate the validation login

I have also found many code restructre like this

I am opening the issue because pingcrm is slowly getting populared so it will be used in some of the entrprise companies

So app should be neat and clean and must easy to maintain

So If You are intrested in Restructing the code kidly tell me i will create the PR for that

OR close the issue

Hello !! I follow all instructions ( nothing hard ) and all right!

When I go to /login i get this error.

Something that can be? Thanks !!!!

See https://twitter.com/felixkiss/status/1208808587054718977

When the app source code is view in the browser the list of all route in the application can be seen which I think this is insecured if there is other reason for this please kindly state

Just source diving this, to determine if converting an existing laravel vue turbolinks site would be easily accomplished. One of the things I had to deal with was CSRF, can you point out where you handle that? I notice the middleware is still in pingcrm but I've had some trouble figuring out where you are handling that.

Thanks.

There's an error in Error 500 page
Link

Undefined variable: fail

Code:

Route::get('500', function () {

    // Force debug mode for this endpoint in the demo environment

    if (App::environment('demo')) {

        Config::set('app.debug', true);

    }

    echo $fail;

});

this.$inertia.put(this.route('users.update', this.user.id), formData).then(() => {
this.sending = false
})

Laravel :
public function update(Request $request, User $user)
{
return $request->all(); // $request->name // $user
}

did not get any data to request or $user model...

Form Data sending to the exact route

response from update method

***Store method working fine. I am sending data exact same way ****

Maybe out of this demo app's scope, but would like to see how multi-language is supported in an inertia app. It might be similar to the typical SPA way, but I see some differences, e.g. we can leverage the lang switching feature on server side, which could make frontend dumb simple. (That's the beauty of inertia).

Feel free to close this issue if it's not align with the goal of this repo.

Is there a reason this is locked to PHP 7.2 and won't install with PHP 7.3?

Needs a migration added from laravel 8: create_sessions_table.php.

Thanks for your great work on what looks like an excellent project.

This is more a question than an issue, has anyone been able to update the demo application to laravel 7? I have had a go today but I have been getting stuck around league/glide dependencies. Does anyone have any advice on how to upgrade?

Are we intending to keep the routes file as is, as to be explicit in how the routes and the controllers are mapped out?

I understand the decision if the intention behind it was to make it more readable for people coming from a non-framework background as well as one where resource routes aren't a thing.

I am new to inertia and vuejs and trying to understand code written for demo. Below is dashboard page code. I wanted to understand how does it reflect with top and left navigation bar as it is not included in code

`

`

Hey! How i search on input select with tailwind?? Thx so much

How would you access the route name for conditional rendering/styling?

I am new at Inertiajs. It might be my problem not inertiajs issue. Anyway...

After successfully login, when I click browser back button I am showing my login page again. How can I protect viewing login page after successfully login. Thanks

Are there any plans to upgrade Tailwindcss? I was looking to use the Tailwind UI components, but some of them require Tailwind 2.0

How to avoid going back to login page when user click back button

I installed a sample of this application on a Mac and I successfully built the assets using yarn and yarn dev. When I ran this on a Linux based server however, I was getting the following errors;

 ERROR  Failed to compile with 1 errors                                                                                                                     10:55:53 PM

This relative module was not found:

* @/Shared/Dropdown in ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/Shared/Layout.vue?vue&type=script&lang=js&
 5 assets

ERROR in ./resources/js/Shared/Layout.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/Shared/Layout.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '@/Shared/Dropdown' in '/www/cec4u.co.uk/releases/11/resources/js/Shared'
 @ ./resources/js/Shared/Layout.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/Shared/Layout.vue?vue&type=script&lang=js&) 75:0-41
 @ ./resources/js/Shared/Layout.vue?vue&type=script&lang=js&
 @ ./resources/js/Shared/Layout.vue
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/Pages/Admin/Dashboard.vue?vue&type=script&lang=js&
 @ ./resources/js/Pages/Admin/Dashboard.vue?vue&type=script&lang=js&
 @ ./resources/js/Pages/Admin/Dashboard.vue
 @ ./resources/js/Pages sync ^\.\/.*$
 @ ./resources/js/app-admin.js
 @ multi ./resources/js/app-admin.js

This error occurs when loading the shared components with Layout.vue
I spent a couple of hours trying to figure this out but to no avail.
Operating system: Ubuntu 18.04
NPM : 6.13.4
Node: v10.18.1
Vue: 2.6.11
Laravel Mix: 5.0.1

After installing the Ping CRM demo application according to the documentation it works as expected in Firefox and Google Chrome browsers, but when trying to access it in IE/Edge the application does not render and the Javascript console shows the following error:

"SCRIPT1028: SCRIPT1028: Expected identifier, string or number" app.js (522, 1)

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! axios */ \"./node_modules/axios/index.js\");\n/* harmony import */ var […]

I've experienced the same issue with another application I've migrated to InertiaJS so it might be a general issue with InertiaJS.

Not relevant. I already understood how

I am not able to register a new route it keeps redirecting to the login page while I want to have a landing page in URL ('/')
any solution, please?

A modal is shown whenever an exception happens in server side..

How would someone handle exceptions in Inertia? so that, it shows a vue's page instead of a modal?

It would be nice if this demo shows how to do that.

I followed instructions to the letter. I just get a blank page when I navigate to index.php

I just followed the instructions to clone and install the application. Other pages seems to work fine, but all the page components that have remember: property set give me Vue warnings in console.

[Vue warn]: Error in callback for immediate watcher "form": "TypeError: Cannot set property 'default' of undefined"

This one is from Pages/Users/Edit.vue, and if I comment out remember: 'form' then error disappears.

Anyone else gets this error/warning in console?

Any way we can add more icons in the Icons.vue component? Would like to add some more icons that can be used in the application.

Installed both https://github.com/reinink/client-side-rendering-in-laravel and https://github.com/inertiajs/pingcrm
and it turns out pingcrm (built on infinityjs) is a lot slower to load each page.
Why is that and is it possible to make infiniteyjs / pingcrm as snappy as the client-side-rendering-in-laravel codebase?

Steps to reproduce:

1. Clone the repo
2. cd into new folder
3. Run composer install
4. Copy .env.example to .env and configure it (if needed)
5. Run php artisan key:generate
6. Create the database file (linux\mac: touch database\database.sqlite)
7. Run php artisan migrate:fresh --seed
8. Run npm ci
9. Run npm run prod
10. Run php artisan serve
11. Navigate to app url
12. Login
13. Click the "404 error" button
14. Close the modal

Even with the modal closed the nprogress bar and loader keeps running indefinitely, no console errors are thrown.

Tailwind v1.0.0 was released!.. please update.