Need some other elaborated examples for react

[praveenkutty-zz]

Other than Todo app can you give me few example to get clear about this package
Thanks in advance.

[stalniy]

What exactly do you want to see? Redux usage? App with more subject types?

[praveenkutty-zz]

Todo app was helpful for me to understand about abilities, since it was a simple implementation.

However I am planning to use CASL /React for an application similar to an CRM, which has a lot of buttons, components, user levels etc to handle.

I am able to define my abilities but I find it difficult to link with CAN, do, i, subjects etc, hence requesting for another example using a enterprise level app in the explanation. Do you have one ??

[stalniy]

I see. But can you please describe some usecase which you don’t understand how to implement?

So I will be able to tackle only that particular aspect.

[praveenkutty-zz]

I ll get back to you with an example soon

[tmikaeld]

I think that examples that work in jsfiddle would be better, easier to grasp at a glance and since this is all just JS it could be language agnostic examples and people can just fork the jsfiddle with more library examples and contribute.

It seems to be a common theme here that practical examples are missing.

[praveenkutty-zz]

@stalniy Find a sample app in the link below
https://codesandbox.io/s/ppkx8mlyyx

In this app I would like to achieve the following
Users levels = Admin, Manager, Sales, Project Leader, User

When Admin is chosen,
Tabs Sales Order, Purchase Order, Report, Master Data should be visible and active to use the functionalities.

When Manager is chosen,
Tab Sales Order should be greyed out.

Tabs Purchase order, Report should be visible and clickable.

Tab Master Data should be visible but Add Button in products and inventory should display Message "Only Admin can do this".

When Project Leader is chosen,
Report Tab alone should be usable and rest tabs should be disabled and visible

When Sales is chosen,
Tab Sales order alone should work and rest be disabled.

When User is chosen,
Tabs Sales Order, Purchase Order, Report, Master Data should be visible and no edit options.

Please suggest the best practice

[stalniy]

@praveenkutty https://codesandbox.io/s/y2vzprmnvz?fontsize=14

Permissions for different roles are defined in config/permissions.js. Hopefully it helps. You can define as much subjects as you need to represent your business logic. Basically subject type is a Domain Model name. So, I'd recommend to think about permissions in context of Domain Models not views

[stalniy]

@praveenkutty does it help you?

[muzamalidrees]

Hi, @stalniy , I also want to use this awesome package but there is a problem if u can help...the case is the same as @praveenkutty but how it can be done if i want to fetch users, roles and permissions from database. i m using MYSQL with sequelize, nodeJS and ExpressJs. if u create a file elaborating that issue i shall be very thankful, Sorry to say I m beginner @ react if u feel inconvenience.

[stalniy]

Usually you need to get permissions during login and update client side ability instance with permissions.

1. Login screen on ui
2. User provides credentials
3. Ui sends request to server
4. Server returns information about user, authorization token and permissions
5. Update Ability instance with provided permissions.

This is a valid algorithm for any ui framework/code.

here you can find information how to update abilities using json (see update method)

[stalniy]

Currently don’t have enough free time to work on an example. Finishing article about Angular 7. Then I plan to update doc’s examples to be more interactive (plan to use scrimba for this). So, it may be a bit more helpful.

Also plan to create a book of recipes and maybe udemy course but don’t know the schedule... probably closer to the end of the year.

Currently close this issue as there is no plans to create other examples.

Feel free to ask questions in gitter chat with provided links to what you have already done

Thanks for the interest to casl :)