inertiajs / pingcrm Goto Github PK
View Code? Open in Web Editor NEWA demo application to illustrate how Inertia.js works.
Home Page: http://demo.inertiajs.com
License: MIT License
A demo application to illustrate how Inertia.js works.
Home Page: http://demo.inertiajs.com
License: MIT License
How would you access the route name for conditional rendering/styling?
Not relevant. I already understood how
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?
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
***Store method working fine. I am sending data exact same way ****
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... π
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
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.
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 "..." .
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.
Π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)
Any update to Vue3?
no setup with how to run it in last setup
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
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!
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;
});
Are there any plans to upgrade Tailwindcss? I was looking to use the Tailwind UI
components, but some of them require Tailwind 2.0
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?
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.
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.
Needs a migration added from laravel 8: create_sessions_table.php.
Thanks for your great work on what looks like an excellent project.
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.
Steps to reproduce:
cd
into new foldercomposer install
.env.example
to .env
and configure it (if needed)php artisan key:generate
touch database\database.sqlite
)php artisan migrate:fresh --seed
npm ci
npm run prod
php artisan serve
Even with the modal closed the nprogress bar and loader keeps running indefinitely, no console errors are thrown.
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?
Tailwind v1.0.0 was released!.. please update.
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
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
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!
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?
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
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.
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.
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 there! Welcome to Ping CRM, a demo app designed to help illustrate how Inertia.js works.
π These links are intended to be broken to illustrate how error handling works with Inertia.js.
`
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?
It would be great if sorting of Columns is added to list
Hey! How i search on input select with tailwind?? Thx so much
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?
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,
],
];
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?
How to avoid going back to login page when user click back button
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?
I followed instructions to the letter. I just get a blank page when I navigate to index.php
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.