NeetoTeam 成员Nano

这个 neeto-team-members-nano 协助管理小组成员 在需要的应用程序中。 纳米出口 @bigbinary/neeto-team-members-frontend 国家防范机制一揽子计划 neeto-team-members-engine 铁路发展引擎. 小组成员 Playwright 帮助器独立发布为 @bigbinary/neeto-team-members-playwright 从 playwright/ 目录.

目录

1. 用主机应用程序开发
   • 发动机
     • 安装
     • 使用量
   • 前端软件包
     • 安装
     • 发展指示
     • 构成部分
2. 出版指令
3. 剧作家助手

用主机应用程序开发

发动机

该引擎用于为组织播映角色和权限. 这个 也提出了处理与下列方面有关的共同逻辑的关切: User 型号.

安装

1. 将此行添加到您的应用程序的 Gemfile 中 :

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

2. 然后执行:

   bundle install
   

3. 将此行添加到您的应用程序 config/routes.rb 文件 :

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

4. 运行命令以将所需的全部迁移从引擎带入 主机应用程序 :

   bundle exec rails neeto_team_members_engine:install:migrations
   

5. 添加迁移到数据库 :

   bundle exec rails db:migrate
   

6. 现在,运行将复制所需文件的生成器.

   bundle exec rails g neeto_team_members_engine:install
   

   此命令将尝试注入引擎的路径以及创建一个 config/permissions.yml 文件以添加所需的权限.

使用量

您可以在此了解更多设置和用途:

1. 权限
2. 作用
3. 关注的问题
4. 成员限制

前端软件包

该套件输出四个组成部分: Roles, (中文(简体) ), TeamMembers, (中文(简体) ), Permissions, (中文(简体) ), 财务报告和审定财务报表 ManageRole。 。 。 .

安装

安装最新的 NeetoTeamMembersNano 使用下列命令的软件包:

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

发展指示

检查 前端软件包开发指南 用于开发前端软件包的分步指令.

构成部分

Roles

该部门管理团队角色。 它包括添加等功能 角色和允许角色更新与相关权限.

道具

• config: 包含强制规格的配置对象 头面包屑和角色权限。 还可以选择 帮助文章和权限等级的配置 .

配置

参见 作用 详细信息 关于当前 Roles 组件.

使用量

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

该构成部分为增加、更新和观看团队提供了功能 成员及其作用,以表格形式。 此外,它还提供过滤 基于电子邮件、名称和角色的选项.

道具

• config: 配置对象,允许定制角色管理, 成员操作权限, UI 元素如按钮和信头, 回调 函数、表格结构、下拉动作和各种显示方面.

配置

参见 团队成员 详细章节 现有配置信息 TeamMembers 组件.

使用量

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: 一系列权限.
• isDisabled: 布尔表示组件是否被禁用。 以 默认,这是虚假的.
• permissionRelationConfig: 管理父子的配置 关系和取消选中权限.

配置

参见 权限 详细章节 现有配置信息 TeamMembers 组件.

使用量

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

该组件是用于添加或编辑团队成员的基于格式的界面.

道具

• config: 配置对象,并带有自定义的各种选项 组件的行为.
• onComplete: 当组件关闭或 表格将提交.
• roles: 可供团队成员使用的一系列角色.
• selectedMember: 如果适用,小组成员反对正在编辑.
• componentConfig: 特定组件的配置,包括类型 网格,初始焦点参考等.

配置

参见 管理成员 页:1 现有组合的详细信息 ManageMembers 组件.

使用量

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

这个 Profile 组件封装用户配置功能,整合 (单位:千美元) Pane 用于显示配置图细节的组件和 a usePaneState 钩入 有效管理与《公约》有关的状态 Pane。 。 。 .

1. Profile.Pane: 组件是用于查看和 编辑用户的配置文件细节.

   

2. Profile.usePaneState: 用于管理剖面板状态的钩子.

   使用量

   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>
     </>
   );
   

   设置器也使用可选的 focusField窗帘再打开 直接以该字段为焦点的编辑模式。 它接受 firstName, (中文(简体) ), lastName 财务报告和审定财务报表 phonenumber。没有它,窗帘就会以视图模式打开.

   const [, setIsOpen] = Profile.usePaneState();
   
   return (
     <button onClick={() => setIsOpen(true, { focusField: "phonenumber" })}>
       Add phone number
     </button>
   );
   

出版指令

咨询 构建和释放软件包 关于如何出版的详细指南.

@bigbinary/neeto-team-members-playwright 与 playwright/ 当合并后的公关有 playwright 标签和a patch, (中文(简体) ), minor,或 major 标签.

一体化