permissions selection with multiselect

[scicco]

Description

This commit will change permission management by using the vue-select library instead of checkboxes and address #95

Type of change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality)
• This change requires a documentation update

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings

[zAlweNy26]

Awesome! Thanks for the PR, I'll review it as soon as possible

[zAlweNy26]

Hi @scicco , I tested the PR and saw some issues:

• When I try to remove one permission, for some unknown reasons it removes the last two
• It is not pretty visible in dark mode
• The package is not made in typescript, making it difficult to use. I searched for an alternative online and saw this one which seems very good and more up-to-date although less well known.

Would you mind updating the PR to use this package instead?
Also please run the linting commands so that everything is prettified correctly.
Thanks!

[mastrogiovanni]

I would like to add a comment here: many providers use simple names to fill the matrix.
Instead of having a custom multiselect (that could be the "advanced mode") I suggest to use few words to summaryze multiple permissions:

None => ()
Reader => (READ, LIST)
Writer => (READ, LIST, WRITE, EDIT)
Admin => (READ, LIST, WRITE, EDIT, DELETE)

In this case a simple combo is enough

[zAlweNy26]

@mastrogiovanni what if I want to switch to the "advanced mode"?

[mastrogiovanni]

@mastrogiovanni what if I want to switch to the "advanced mode"?

I image a simple flag on top, when checked is "advanced" mode.
In normal mode I would have only a single combo with that one I said.
Also I don't know if there are use cases for having a grid or a multiselect.

In reality the single combo solution is also a nice solution to switch permissions directly in the user list table.

[scicco]

Hi @scicco , I tested the PR and saw some issues:

* When I try to remove one permission, for some unknown reasons it removes the last two

* It is not pretty visible in dark mode

* The package is not made in typescript, making it difficult to use. I searched for an alternative online and saw [this one](https://vue3-select-component.vercel.app) che mi sembra ottimo e più aggiornato anche se meno conosciuto.

Would you mind updating the PR to use this package instead? Also please run the linting commands so that everything is prettified correctly. Thanks!

Hello, sorry for the delay in the response,

I'm having issues switching from the former component to the one you mentioned, mainly because I'm not well versed with vue and typescript in general: the new select expects having options with label and value while we simply use <Record<string: AuthPermission>> and I didn't find yet a proper way to manage that difference.

If I manage to resolve this, I'll also work on the other issues you mentioned

[pieroit]

Kudos @scicco for the contribution and kudos @zAlweNy26 for the maintaining

Proud of you