# NeetoTeamMembersNano

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](#development-with-host-application)
   - [Engine](#engine)
     - [Installation](#installation)
     - [Usage](#usage)
   - [Frontend package](#frontend-package)
     - [Installation](#installation-1)
     - [Instructions for development](#instructions-for-development)
     - [Components](#components)
2. [Instructions for Publishing](#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:

   ```ruby
    source "NEETO_GEM_SERVER_URL" do
      # ...existing gems

      gem 'neeto-team-members-engine'
    end
   ```

2. And then execute:

   ```shell
   bundle install
   ```

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

   ```ruby
    mount NeetoTeamMembersEngine::Engine, at: "/neeto_team_members"
   ```


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

   ```shell
   bundle exec rails neeto_team_members_engine:install:migrations
   ```

5. Add the migrations to the database:

   ```shell
   bundle exec rails db:migrate
   ```

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

   ```shell
   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](./docs/engine/permissions.md)
2. [Roles](./docs/engine/roles.md)
3. [Concerns](./docs/engine/concerns.md)
4. [Member Limit](./docs/engine/member_limits.md)

### Frontend package

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

#### Installation

Install the latest `NeetoTeamMembersNano` package using the below command:

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

### Instructions for development

Check the
[Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0)
for step-by-step instructions to develop the frontend package.

### Components

#### `Roles`

![Roles page](./docs/frontend/images/roles_page.png)

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](./docs/frontend/roles.md) section for detailed information
on the available configurations for the `Roles` component.

###### Usage

```jsx
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`

![Team members page](./docs/frontend/images/members_page.png)

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](./docs/frontend/team_members.md) section for detailed
information on the available configurations for the `TeamMembers` component.

###### Usage

```jsx
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`

![Permissions component](./docs/frontend/images/permissions_component.png)

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](./docs/frontend/permissions.md) section for detailed
information on the available configurations for the `TeamMembers` component.

###### Usage

```jsx
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`

![Manage members pane component](./docs/frontend/images/manage_members_component.png)

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](./docs/frontend/manage_members.md) section for
detailed information on the available configurations for the `ManageMembers`
component.

###### Usage

```jsx
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.

   ![Profile pane component](./docs/frontend/images/profile_component.png)

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

   ###### Usage

   ```jsx
   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](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages)
guide for details on how to publish.

## Integrations

| Projects       |    TeamMembers     |       Roles        |    Permissions     |
| -------------- | :----------------: | :----------------: | :----------------: |
| NeetoAuth      | :white_check_mark: | :white_check_mark: |         -          |
| NeetoCal       | :white_check_mark: | :white_check_mark: |         -          |
| NeetoChangelog | :white_check_mark: | :white_check_mark: |         -          |
| NeetoChat      | :white_check_mark: | :white_check_mark: |         -          |
| NeetoCI        | :white_check_mark: | :white_check_mark: |         -          |
| NeetoCourse    | :white_check_mark: | :white_check_mark: |         -          |
| NeetoCRM       | :white_check_mark: | :white_check_mark: |         -          |
| NeetoDeploy    | :white_check_mark: | :white_check_mark: | :white_check_mark: |
| NeetoDesk      | :white_check_mark: | :white_check_mark: |         -          |
| NeetoForm      | :white_check_mark: | :white_check_mark: |         -          |
| NeetoGit       | :white_check_mark: | :white_check_mark: |         -          |
| NeetoInvisible | :white_check_mark: | :white_check_mark: |         -          |
| NeetoInvoice   | :white_check_mark: | :white_check_mark: |         -          |
| NeetoKB        | :white_check_mark: | :white_check_mark: |         -          |
| NeetoPlanner   | :white_check_mark: | :white_check_mark: |         -          |
| NeetoPlaydash  | :white_check_mark: | :white_check_mark: |         -          |
| NeetoQuiz      | :white_check_mark: | :white_check_mark: |         -          |
| NeetoRecord    | :white_check_mark: | :white_check_mark: |         -          |
| NeetoReplay    | :white_check_mark: | :white_check_mark: |         -          |
| NeetoRunner    | :white_check_mark: | :white_check_mark: |         -          |
| NeetoSite      | :white_check_mark: | :white_check_mark: |         -          |
| NeetoTestify   | :white_check_mark: | :white_check_mark: |         -          |
| NeetoTower     | :white_check_mark: | :white_check_mark: |         -          |
| NeetoWheel     | :white_check_mark: | :white_check_mark: |         -          |
| NeetoWireframe | :white_check_mark: | :white_check_mark: |         -          |
