@bigbinary/neeto-projects-frontend

neeto-projects-nano

The neeto-projects-nano streamlines project management in Neeto applications. It allows creating and editing projects, managing members, overseeing roles, bulk-adding and inviting members, and includes a dashboard for viewing, adding, editing, and searching projects.

The nano exports the @bigbinary/neeto-projects-frontend NPM package and neeto-projects-engine Rails engine for development.

Contents

• Development with Host Application

  • Engine
    • Installation
    • Usage
  • Frontend package
    • Installation
    • Components
    • Other Functions

• Instructions for Publishing

Development with Host Application

Engine

The engine is used to manage projects and project members across neeto products. It also provides concerns to handle common logic related to Project and User model.

Installation

• Add this line to your application's Gemfile:

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

• Make sure neeto-invite-links-engine is already installed or else add this line to your application's Gemfile:

  source "NEETO_GEM_SERVER_URL" do
    # ..existing gems
  
    gem 'neeto-invite-links-engine'
  end
  

• And then execute:

  bundle install
  

• Configure the organization model in the host application.

  has_many :projects, class_name: "NeetoProjectsEngine::Project", dependent: :destroy
  

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

  mount NeetoProjectsEngine::Engine, at: "/neeto_projects"
  

  NOTE: The mount point must be /neeto_projects and cannot be changed to any other path.

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

  bundle exec rails neeto_projects_engine:install:migrations
  

• Add the migrations to the database:

  bundle exec rails db:migrate
  

• Add the permission neeto_projects_engine.manage_projects to your permissions.yml file.

Usage

You can learn more about the setup and usage here:

• Models
• Concerns
• Services

Frontend package

Installation

Install the latest NeetoProjectsNano package using the below command:

yarn add @bigbinary/neeto-projects-frontend

Instructions for development

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

Components

Dashboard (source code)

The Dashboard component is used to manage projects in your web application. It provides a user interface for viewing, adding, and editing projects, as well as searching for projects.

Props

• linkHelpLink: A link to a help article or documentation about project links.
• projectShowRoute: The route or URL pattern to redirect to when clicking on a project to view its details.

Usage

import React from "react";
import { Dashboard } from "@bigbinary/neeto-projects-frontend";

const App = () => {
  const linkHelpLink = "https://help.neetoplanner.com/articles/project-link";

  const projectShowRoute = "/projects/:slug";

  return (
    <Dashboard
      linkHelpLink={linkHelpLink}
      projectShowRoute={projectShowRoute}
    />
  );
};

export default App;

AddProject (source code)

The AddProject component is a side pane used for creating a new project. It provides a user interface for entering project details and creating a project.

Props

• isOpen: Determines whether the add project pane is open or closed. Defaults to false.
• onClose: A callback function to close the add project pane. Defaults to a no-operation function (noop).

Optional Props

• linkHelpLink: A link to a help article or documentation about project links.
• projectShowRoute: A function to specify the route or URL pattern to redirect to after successfully creating a project.
• formHeader: A custom header component that can be added to the add project pane.
• invalidateQueryKeys: An array of query keys to invalidate when a project is created.
• showProjectLinkInError: Determines whether to show a link to an existing project in case of an error.
• maxLinkLength: Specifies the maximum length for the project link. By default, it is 80 characters.
• isLinkLowerCase: Determines if the project link should be converted to lowercase; it is set to true by default.

Usage

import React, { useState } from "react";

import { AddProject } from "@bigbinary/neeto-projects-frontend";
import { buildUrl } from "neetocommons/utils";

const App = () => {
  const [isPaneOpen, setIsPaneOpen] = useState(false);

  const linkHelpLink = "https://help.neetoplanner.com/articles/project-link";

  const buildProjectShowRoute = slug => buildUrl("/projects/:slug", { slug });

  const CustomHeader = () => <div>Custom header</div>;

  return (
    <AddProject
      isOpen={isPaneOpen}
      onClose={() => setIsPaneOpen(false)}
      linkHelpLink={linkHelpLink}
      projectShowRoute={buildProjectShowRoute}
      formHeader={<CustomHeader />}
    />
  );
};

export default App;

ProjectMembers (source code)

The ProjectMembers component is used to manage members of a project within a web application. It provides a user interface for viewing, adding, editing, and deleting project members.

Props

• homeRoute: Specifies the route or URL pattern to redirect to. This will be used when logged-in member leaves and project. Defaults to an empty string.
• projectName: Specifies the name of the project.

Optional Props

• membersRoute: Specifies the route or URL pattern for managing project members. Defaults to "/members."
• taxonomy: Specifies the taxonomy, which can be "project" or "template." Defaults to "project."
• projectLink: Specifies the unique link of the project.
• invalidateQueryKeys: An array of query keys to invalidate.
• addNewMemberPaneProps: Additional props for configuring the behavior of the "Add Member" pane.
• shouldInvalidateMembersAfterRemovingLoggedInUser: Specifies whether to refetch project members of a project after removing currently logged in user from it. Defaults to "true".

Usage

import React from "react";

import { ProjectMembers } from "@bigbinary/neeto-projects-frontend";

const App = () => {
  const projectName = "NeetoPlanner";
  const homeRoute = "/";

  return <ProjectMembers homeRoute={homeRoute} projectName={projectName} />;
};

export default App;

Invitation (source code)

The Invitation component is used to manage invitations to projects or templates within a neeto application. It provides functionality for joining a project or template by accepting an invitation.

Props

• projectShowRoute: Redirects to the project show page when a user joins a project.

Optional Props

• templateShowRoute: Redirects to the template show page when a user joins a template.

Usage

import React from "react";

import { Invitation } from "@bigbinary/neeto-projects-frontend";

const App = () => {
  const buildProjectShowRoute = slug => buildUrl("/projects/:slug", { slug });

  return <Invitation projectShowRoute={buildProjectShowRoute} />;
};

export default App;

EditProject (source code)

The EditProject component is a side pane used for editing project or template details. It provides a user interface for modifying project or template information.

Props

• isOpen: Determines whether the edit project pane is open or closed. Defaults to false.
• onClose: A callback function to close the edit project pane. Defaults to a no-operation function (noop).
• projectLink Specifies the unique link of the project or template.
• paneHeader: The title for the edit project pane.

Optional Props

• taxonomy: Specifies the taxonomy, which can be "project" or "template". Defaults to "project".
• projectShowRoute: Specifies the route or URL pattern to redirect to after making changes to the project or template.
• invalidateQueryKeys: An array of query keys to invalidate.
• linkHelpLink: A link to a help article or documentation about project or template links.
• showProjectLinkInError: Determines whether to show a link to the project or template in case of an error.
• maxLinkLength: Specifies the maximum length for the project link. By default, it is 80 characters.
• isLinkLowerCase: Determines if the project link should be converted to lowercase; it is set to true by default.

Usage

import React, { useState } from "react";

import { EditProject } from "@bigbinary/neeto-projects-frontend";

const App = () => {
  const [isPaneOpen, setIsPaneOpen] = useState(false);

  const projectLink = "test";
  const projectShowRoute = "/projects/:slug";
  const paneHeader = "Edit project";

  return (
    <EditProject
      isOpen={isPaneOpen}
      onClose={() => setIsPaneOpen(false)}
      projectLink={projectLink}
      projectShowRoute={projectShowRoute}
      paneHeader={paneHeader}
    />
  );
};

export default App;

AddMember (source code)

The AddMember component is a side pane used to add members to a project or template. It provides a user interface for selecting and adding members to the specified project or template.

Props

• isOpen: Determines whether the add member pane is open or closed. Defaults to false.
• onClose: A callback function to close the add member pane. Defaults to a no-operation function (noop).
• projectLink: Specifies the unique link of the project or template to which members will be added.
• projectName: Specifies the name of the project or template.

Optional Props

• taxonomy: Specifies the taxonomy, which can be "project" or "template". Defaults to "project".
• invalidateQueryKeys: An array of query keys that, when provided, allows you to specify which queries should be invalidated when adding members.
• membersRoute: Specifies the route or URL for accessing project members.
• searchedMemberEmail: Pre-fills the search field with a member's email when the add member pane is opened.

Usage

import React, { useState } from "react";

import { AddMember } from "@bigbinary/neeto-projects-frontend";

const App = () => {
  const [isPaneOpen, setIsPaneOpen] = useState(false);

  const projectLink = "neetoplanner";
  const projectName = "NeetoPlanner";

  return (
    <AddMember
      isOpen={isPaneOpen}
      onClose={() => setIsPaneOpen(false)}
      projectLink={projectLink}
      projectName={projectName}
    />
  );
};

export default App;

AddMembersToProject (source code)

The AddMembersToProjects component is designed to facilitate the process of adding multiple members to multiple projects. It renders a side pane that allows users to select projects and members for bulk addition.

Props

• isOpen: Controls the visibility of the side pane. When set to true, the pane is open; when set to false, the pane is closed.
• membersData: An array of selected members' data. This data typically includes information about the members you want to add to projects.
• onClose: A callback function that is triggered when the side pane is closed. It allows you to perform actions when the pane is closed.
• projectsRoute: A redirect route to the project add page. If there are no projects present, users can be redirected to this route for adding new projects.

Optional Props

• invalidateQueryKeys: An array of query keys that can be passed to invalidate specific queries or cache when certain actions are performed.
• maxLinkLength: Specifies the maximum length for the project link. By default, it is 80 characters.
• isLinkLowerCase: Determines if the project link should be converted to lowercase; it is set to true by default.

Usage

import React, { useState } from "react";

import { AddMembersToProjects } from "@bigbinary/neeto-projects-frontend";

const App = () => {
  const [isPaneOpen, setIsPaneOpen] = useState(false);
  const projectsRoute = "/projects",

  return (
    <AddMembersToProjects
      isOpen={isPaneOpen}
      onClose={() => setIsPaneOpen(false)}
      projectsRoute={projectsRoute}
    />
  );
};

export default App;

Other Functions

Refetch Project Members (source code)

refetchProjectMembers, is used to refresh or refetch the project members list within your application. To use it, you need to pass queryClient as an argument to the function as shown below:

import { refetchProjectMembers } from "@bigbinary/neeto-projects-frontend";

refetchProjectMembers(queryClient);

Refetch Organization Users (source code)

refetchOrganizationUsers, is used to refresh or refetch the project members list within your application. To use it, you need to pass queryClient as an argument to the function as shown below:

import { refetchOrganizationUsers } from "@bigbinary/neeto-projects-frontend";

refetchOrganizationUsers(queryClient);

Refetch Project (source code)

refetchProject, is used to refresh or refetch the project members list within your application. To use it, you need to pass queryClient as an argument to the function as shown below:

import { refetchProject } from "@bigbinary/neeto-projects-frontend";

refetchProject(queryClient);

Instructions for Publishing

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