@bigbinary/neeto-projects-frontend v1.0.56
neeto-projects-nano
The neeto-projects-nano
facilitates the administration of projects within neeto applications. The nano exports the @bigbinary/neeto-projects-frontend
NPM package and neeto-projects-engine
Rails engine for development.
Contents
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 => "/neeto_projects_engine"
- 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
Usage
You can learn more about the setup and usage here: 1. Models 2. Concerns 2. 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
identifierHelpLink
: A link to a help article or documentation about project identifiers.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 identifierHelpLink =
"https://help.neetoplanner.com/articles/project-identifier";
const projectShowRoute = "/projects/:altId";
return (
<Dashboard
identifierHelpLink={identifierHelpLink}
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
identifierHelpLink
: A link to a help article or documentation about project identifiers.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.maxIdentifierLength
: Sets the maximum length of the project identifier. The default is 5.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.
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 identifierHelpLink =
"https://help.neetoplanner.com/articles/project-identifier";
const buildProjectShowRoute = altId =>
buildUrl("/projects/:altId", { altId });
const CustomHeader = () => <div>Custom header</div>;
return (
<AddProject
isOpen={isPaneOpen}
onClose={() => setIsPaneOpen(false)}
identifierHelpLink={identifierHelpLink}
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."projectIdentifier
: Specifies the unique identifier 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 = altId =>
buildUrl("/projects/:altId", { altId });
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).projectIdentifier
Specifies the unique identifier 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.maxIdentifierLength
: Sets the maximum character length of the project or template identifier. The default is 5.invalidateQueryKeys
: An array of query keys to invalidate.identifierHelpLink
: A link to a help article or documentation about project or template identifiers.showProjectLinkInError
: Determines whether to show a link to the project or template in case of an error.
Usage
import React, { useState } from "react";
import { EditProject } from "@bigbinary/neeto-projects-frontend";
const App = () => {
const [isPaneOpen, setIsPaneOpen] = useState(false);
const projectIdentifier = "TEST";
const projectShowRoute = "/projects/:altId";
const paneHeader = "Edit project";
return (
<EditProject
isOpen={isPaneOpen}
onClose={() => setIsPaneOpen(false)}
projectIdentifier={projectIdentifier}
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).projectIdentifier
: Specifies the unique identifier 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 projectIdentifier = "TEST";
const projectName = "NeetoPlanner";
return (
<AddMember
isOpen={isPaneOpen}
onClose={() => setIsPaneOpen(false)}
projectIdentifier={projectIdentifier}
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.
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.
6 days ago
11 days ago
27 days ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
4 months ago
4 months ago
5 months ago
10 months ago
10 months ago
7 months ago
10 months ago
7 months ago
10 months ago
7 months ago
6 months ago
10 months ago
6 months ago
10 months ago
7 months ago
10 months ago
7 months ago
10 months ago
10 months ago
10 months ago
6 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
10 months ago
7 months ago
10 months ago
7 months ago
10 months ago
8 months ago
9 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago