RMP Vue Roles Selector

A component that allows the user to select multiple roles of interest from a list of industry roles, separated by a category name.

List of features

• Modal component containing available Roles and pre selected user Roles
• Category separated list of selectable items
• Searchable categories or specific Roles
• Tags to show which Roles have been selected
• Add and remove selected roles via checkboxes or tag action icons
• List of selected Roles are returned and rendered above modal trigger

Data Types

Required data to populate the component

UserRoles

[{
    "id": 63,
    "name": "Banking - Commercial",
    "code": "CBN"
}, 
{
    "id": 57,
    "name": "Actuarial",
    "code": "ACT"
},
...
]

AllRoles

{
    Business: [
        {
            code: "PUR",
            id: 1,
            name: "Purchasing and Supply"
        },
        {
            code: "ACF",
            id: 2,
            name: "Auditing/Tax"
        }
    ]
    ...
}

Code Demo

<vue-roles-selector
    :user-data-roles="UserRoles"
    :available-roles="AllRoles"/>

Download & Installation

$ npm i vue-roles-selector

Authors or Acknowledgments

• RMP Enterprise

License

This project is licensed under the MIT License