@bigbinary/neeto-team-members-frontend v3.1.1

neeto-team-members-nano

The neeto-team-members-nano facilitates the administration of team members within neeto applications. The nano exports the @bigbinary/neeto-team-members-frontend NPM package and neeto-team-members-engine Rails engine for development.

Contents

1. Development with Host Application
   • Engine
     • Installation
     • Usage
   • Frontend package
     • Installation
     • Instructions for development
     • Components
2. Instructions for Publishing

Development with Host Application

Engine

The engine is used to seed the roles and permissions for the organization. It also provides concerns to handle common logic related to User model.

Installation

1. Add this line to your application's Gemfile:

    source "NEETO_GEM_SERVER_URL" do
      # ..existing gems
   
      gem 'neeto-team-members-engine'
    end

2. And then execute:

   bundle install

3. Add this line to your application's config/routes.rb file:

    mount NeetoTeamMembersEngine::Engine => "/neeto_team_members_engine"

4. Run the command to bring in all migrations required from the engine to the host application:

   bundle exec rails neeto_team_members_engine:install:migrations

5. Add the migrations to the database:

   bundle exec rails db:migrate

6. Now, run the generator which will copy the required files.

   bundle exec rails g neeto_team_members_engine:install

   This command will try to inject the engine's route as well as create a config/permissions.yml file to add the permissions required.

Usage

You can learn more about the setup and usage here:

1. Permissions
2. Roles
3. Concerns
4. Member Limit

Frontend package

The package exports the four components: Roles, TeamMembers, Permissions, and ManageRole.

Installation

Install the latest NeetoTeamMembersNano package using the below command:

yarn add @bigbinary/neeto-team-members-frontend

Instructions for development

Check the Frontend package development guide for step-by-step instructions to develop the frontend package.

Components

Roles

This component manages team roles. It includes functionalities such as adding roles and allowing updates to roles with associated permissions.

Props

• config: Configuration object that includes mandatory specifications for header breadcrumbs and role permissions. It also allows optional configurations for help articles and permission hierarchy.

Configuration

Refer to the Roles section for detailed information on the available configurations for the Roles component.

Usage

import React from "react";

import { Roles } from "@bigbinary/neeto-team-members-frontend";
import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
import { ToastContainer } from "react-toastify";

import SideBar from "./components/Common/SideBar";

const App = () => (
  <BrowserRouter>
    <div className="flex">
      <SideBar />
      <Switch>
        <Route exact path="/roles">
          <Roles config={ROLES_CONFIG} />
        </Route>
      </Switch>
    </div>
    <ToastContainer />
  </BrowserRouter>
);

export default App;

TeamMembers

The component offers functionalities for adding, updating and viewing team members and their roles in a tabular format. Additionally, it provides filtering options based on email, name, and role.

Props

• config: Configuration object that allows customization of role management, member operation permissions, UI elements like buttons and headers, callback functions, table structure, dropdown actions, and various display aspects.

Configuration

Refer to the TeamMembers section for detailed information on the available configurations for the TeamMembers component.

Usage

import React from "react";

import { TeamMembers } from "@bigbinary/neeto-team-members-frontend";
import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
import { ToastContainer } from "react-toastify";

import SideBar from "./components/Common/SideBar";

const App = () => (
  <BrowserRouter>
    <div className="flex">
      <SideBar />
      <Switch>
        <Route exact path="/members">
          <TeamMembers config={MEMBERS_CONFIG} />
        </Route>
      </Switch>
    </div>
    <ToastContainer />
  </BrowserRouter>
);

export default App;

Permissions

The component handles the rendering and management of permissions for team members. It organizes permissions into categories, provides checkboxes for selection, and supports hierarchical structures with parent-child relationships.

Props

• permissions: An array of permissions.
• isDisabled: A boolean indicating whether the component is disabled. By default, it is false.
• permissionRelationConfig: Configuration for managing parent-child relationships and unchecking permissions on select.

Configuration

Refer to the Permissions section for detailed information on the available configurations for the TeamMembers component.

Usage

import React from "react";

import { Permissions } from "@bigbinary/neeto-team-members-frontend";
import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
import { ToastContainer } from "react-toastify";

import SideBar from "./components/Common/SideBar";

const App = () => (
  <BrowserRouter>
    <div className="flex">
      <SideBar />
      <Switch>
        <Route exact path="/permissions">
          <Permissions
            permissionRelationConfig={PERMISSION_RELATION_CONFIG}
            permissions={PERMISSIONS}
          />
        </Route>
      </Switch>
    </div>
    <ToastContainer />
  </BrowserRouter>
);

export default App;

ManageMembers

The component is a form-based interface for adding or editing team members.

Props

• config: Configuration object with various options for customizing the behavior of the component.
• onComplete: Callback function to be executed when the component is closed or the form is submitted.
• roles: An array of roles available for team members.
• selectedMember: The team member object being edited, if applicable.
• componentConfig: Configuration specific to the component, including the type of pane, initial focus reference, etc.

Configuration

Refer to the ManageMembers section for detailed information on the available configurations for the ManageMembers component.

Usage

import React from "react";

import { ManageMembers } from "@bigbinary/neeto-team-members-frontend";
import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
import { ToastContainer } from "react-toastify";

import SideBar from "./components/Common/SideBar";

const App = () => (
  <BrowserRouter>
    <div className="flex">
      <SideBar />
      <Switch>
        <Route exact path="/permissions">
          <ManageMembers
            componentConfig={COMPONENT_CONFIG}
            config={CONFIG}
            onComplete={() => void}
          />
        </Route>
      </Switch>
    </div>
    <ToastContainer />
  </BrowserRouter>
);

export default App;

Profile

The Profile component encapsulates the user profile functionality, integrating a Pane component for displaying profile details and a usePaneState hook to efficiently manage the state associated with the Pane.

1. Profile.Pane: The component is a pane-based interface for viewing and editing the user's profile details.

   

2. Profile.usePaneState: A hook to manage the state of the profile pane.

   Usage

   import { Profile } from "@bigbinary/neeto-team-members-frontend";
   
   const [isOpen, setIsOpen] = Profile.usePaneState();
   
   return (
     <>
       <button onClick={() => setIsOpen(true)}> Open profile pane</button>
       <button onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)}>
         Toggle Profile pane
       </button>
     </>
   );

Instructions for Publishing

Consult the building and releasing packages guide for details on how to publish.

Integrations