UserEditorModal Documentation

Overview

The UserEditorModal component is a modal dialog for creating or editing user information within the Vantage analytics and data platform. It provides a user-friendly interface for administrators to input and save user details, including personal information, security settings, and company affiliation. The modal manages user states and permissions effectively, with dynamic data handling.

Purpose

UserEditorModal serves the following core purposes:

• Allow the creation of new users within the platform.
• Enable editing existing user details, including personal information and user roles.
• Facilitate user management by administrators, ensuring an accurate representation of user data.

Settings

1. isOpen

• Input Type: Boolean
• Description: Determines whether the modal is visible or not. When set to true, the modal is displayed; when false, the modal is hidden.
• Default Value: false

2. onClose

• Input Type: Function
• Description: Callback function triggered when the modal is closed. It is meant to handle the changes in state when the modal is dismissed by the user.
• Default Value: () => {} (an empty function)

3. user

• Input Type: Object or Null
• Description: Represents the user object containing details of the user to be edited. If a user is provided, the modal populates with that user’s information, allowing for editing. If not, the modal is configured for creating a new user.
• Default Value: null

4. onSave

• Input Type: Function
• Description: Callback function executed when the user saves the changes or creates a new user. It receives the formData object containing the user details as a parameter.
• Default Value: () => {} (an empty function)

5. clients

• Input Type: Array
• Description: An array of client objects available for selection in the modal. This represents the companies that users can be associated with. The first client in this array will be set as the default value if no user is being edited.
• Default Value: [] (an empty array)

6. roles

• Input Type: Array
• Description: An array of role objects that can be toggled for the user being created or edited. At least one role must be assigned for new users to save correctly.
• Default Value: [] (an empty array)

Data Handling

The modal uses the following internal states:

• formData: An object that contains the various fields of the user being edited/created:
  • first_name: String - User's first name.
  • last_name: String - User's last name.
  • email: String - User's email address.
  • password: String - User's password.
  • client_id: Numeric - ID of the assigned client.
  • is_active: Boolean - Represents if the user is active.
  • roleIds: Array - List of IDs corresponding to the user roles selected.

Initialization

When the editor opens, initial values are set for the form. If a user object is provided, the modal populates with that user's information; otherwise, it uses default values.

AI Integrations

Currently, the UserEditorModal does not include any specific AI functionalities directly. However, it can be integrated with AI systems for tasks such as:

• Auto-suggesting user roles based on past user configurations.
• Predictive typing for email addresses if integrated with a broader user management system.

Billing Impact

The UserEditorModal itself does not directly impact billing; however, the number of users and roles configured can affect the usage and subscription tier of the Vantage platform. Each new user can potentially increase the billing tier based on the licensing structure.

Use Cases & Examples

Use Cases

1. Adding New Users: An organization wants to onboard new employees to the Vantage platform and needs an intuitive interface to enter their information.
2. Editing User Information: Admins need to update an existing user's details, including their email address and associated roles due to a change in job functions.
3. Managing User Roles: A business needs to frequently modify user roles to accommodate changes in project team structures, requiring an efficient way to toggle user permissions.

Example Configuration

For a specific case where an admin wants to create a new user for the sales department, the configuration might look as follows:

<UserEditorModal 
    isOpen={true} 
    onClose={handleModalClose} 
    user={null} 
    onSave={saveUser} 
    clients={[
        { id: 1, name: "Tech Corp" }, 
        { id: 2, name: "Health Inc." }
    ]} 
    roles={[
        { id: 'admin', name: 'Administrator' }, 
        { id: 'sales', name: 'Sales' }
    ]} 
/>

In this scenario:

• The modal is set to open (isOpen={true}).
• The user data is not pre-populated for creating a new user (user={null}).
• A list of clients and roles is provided, allowing the admin to select the appropriate options.