### Install npm Dependencies
Source: https://github.com/erxes/erxes-docs/blob/main/README.md
Run this command to install the necessary npm dependencies for the template.
```bash
npm install
```
--------------------------------
### Install Node Modules
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/groups/mac/page.mdx
Install all necessary Node.js dependencies for the project.
```bash
yarn install
```
--------------------------------
### Install Dependencies
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/sdks/creategen/page.mdx
Navigate to the erxes CLI directory and install project dependencies using Yarn.
```bash
cd erxes/cli
yarn install
```
--------------------------------
### Start erxes APIs (Backend)
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/page.mdx
Starts the backend APIs for erxes in development mode.
```tsx
pnpm dev:apis
```
--------------------------------
### Execute Install Script
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/deployment/deploymentDocker/page.mdx
Runs the 'install.sh' script to perform the erxes installation. This command should be executed after making the script executable.
```bash
./install.sh
```
--------------------------------
### Install Erxes CLI
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/deployment/deploymentDockerCompose/page.mdx
Install the Erxes CLI globally using npm.
```bash
npm i -g create-erxes-app
```
--------------------------------
### Install Git, Node.js, pnpm, MongoDB, Redis, and Docker (WSL)
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/page.mdx
Commands to install essential software prerequisites on Windows using WSL. Includes Git, Node.js via nvm, pnpm, and notes on Docker Desktop.
```powershell
wsl --install
```
```bash
sudo apt-get install git
git config --global user.name "Your Name"
git config --global user.email "youremail@domain.com"
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
nvm install # installs recommended node version
nvm use # use recommended node version
npm install -g pnpm # install pnpm
```
--------------------------------
### GraphQL Query Examples
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/sdks/creategen/page.mdx
Provides examples for GraphQL queries to retrieve document and document type information. Use these to fetch data based on specific criteria.
```bash
import { Documents, Types } from "../../models";
import { IContext } from "@erxes/api-utils/src/types"
const documentQueries = {
documents(
_root,
{
typeId
},
_context: IContext
) {
const selector: any = {};
if (typeId) {
selector.typeId = typeId;
}
return Documents.find(selector).sort({ order: 1, name: 1 });
},
documentTypes(_root, _args, _context: IContext) {
return Types.find({});
},
documentsTotalCount(_root, _args, _context: IContext) {
return Documents.find({}).countDocuments();
}
};
export default documentQueries;
```
--------------------------------
### Deploy Databases and Start Erxes
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/deployment/deploymentDocker/page.mdx
Deploys the necessary databases and then starts the Erxes service with UI updates. This is typically run after adding Elasticsearch configurations.
```bash
npm run erxes deploy-dbs
npm run erxes up -- --uis
```
--------------------------------
### Start erxes Project
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/groups/mac/page.mdx
Run the erxes development server with dependency monitoring.
```bash
./bin/erxes.js dev --deps
```
--------------------------------
### Started Timer Example
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/authentication/reference/ui/timer/page.mdx
Displays the TaskTimer component in a 'started' status. Use this when a task is actively running.
```tsx
<>
```
--------------------------------
### Run Development Server
Source: https://github.com/erxes/erxes-docs/blob/main/README.md
Execute this command to start the development server and view the website locally.
```bash
npm run dev
```
--------------------------------
### Start erxes UIs (Frontend)
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/page.mdx
Starts the frontend user interfaces for erxes in development mode.
```tsx
pnpm dev:uis
```
--------------------------------
### Install PM2 Globally
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/groups/mac/page.mdx
Install the PM2 process manager globally using npm.
```bash
sudo npm install -g pm2
```
--------------------------------
### Make Install Script Executable
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/deployment/deploymentDocker/page.mdx
Grants execute permissions to the 'install.sh' script. This is required before running the installation.
```bash
sudo chmod +x install.sh
```
--------------------------------
### Install Dependencies with pnpm
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/page.mdx
Installs all project dependencies using the pnpm package manager.
```tsx
pnpm install
```
--------------------------------
### Create erxes App
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/deployment/deploymentDocker/page.mdx
Initiates the erxes installation process. You will be prompted for your erxes domain name.
```bash
create-erxes-app erxes
```
--------------------------------
### Start Erxes API Container
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/deployment/deploymentDockerCompose/page.mdx
After deploying the UI, run this command to start the Erxes API container. You can verify the running containers using 'docker ps -a'.
```bash
npm run erxes up
```
--------------------------------
### GraphQL Mutation Examples
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/sdks/creategen/page.mdx
Provides examples for GraphQL mutations related to document and document type management. Use these for creating, updating, and deleting data.
```bash
import { Documents, Types } from '../../models';
import { IContext } from "@erxes/api-utils/src/types"
const documentMutations = {
/**
* Creates a new document
*/
async documentsAdd(_root, doc, _context: IContext) {
return Documents.createDocument(doc);
},
/**
* Edits a new document
*/
async documentsEdit(
_root,
{ _id, ...doc },
_context: IContext
) {
return Documents.updateDocument(_id, doc);
},
/**
* Removes a single document
*/
async documentsRemove(_root, { _id }, _context: IContext) {
return Documents.removeDocument(_id);
},
/**
* Creates a new type for document
*/
async documentTypesAdd(_root, doc, _context: IContext) {
return Types.createType(doc);
},
async documentTypesRemove(_root, { _id }, _context: IContext) {
return Types.removeType(_id);
},
async documentTypesEdit(
_root,
{ _id, ...doc },
_context: IContext
)
{
return Types.updateType(_id, doc);
}
};
export default documentMutations;
```
--------------------------------
### Start Databases with Docker Compose
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/page.mdx
Starts the services defined in the docker-compose.yml file in detached mode.
```tsx
docker-compose up -d
```
--------------------------------
### Install erxes Dependencies on CentOS
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/page.mdx
This script installs necessary software including nginx, docker, docker-compose, nodejs, and awscli on CentOS servers. It also sets up npm and installs the create-erxes-app globally.
```bash
#!/bin/bash
now=$(date +'%H:%M:%S')
echo -e "\e[1mStep 1 $now : Updating \e[0m"
sudo yum update -y
sudo yum install epel-release -y
now=$(date +'%H:%M:%S')
echo -e "\e[1mStep 2 $now : Installing nginx\e[0m"
sudo yum install nginx -y
sudo systemctl start nginx
sudo yum check-update
now=$(date +'%H:%M:%S')
echo -e "\e[1mStep 3 $now : Installing docker\e[0m"
curl -fsSL https://get.docker.com/ | sh
sudo systemctl start docker
sudo yum install -y \
device-mapper-persistent-data \
lvm2
now=$(date +'%H:%M:%S')
echo -e "\e[1mStep 5 $now : Installing docker-compose\e[0m"
sudo yum install docker-ce -y
sudo yum install http://dl.fedoraproject.org/pub/epel/7/x86_64/Packages/p/pigz-2.3.4-1.el7.x86_64.rpm -y
sudo yum install http://mirror.centos.org/centos/7/extras/x86_64/Packages/container-selinux-2.21-1.el7.noarch.rpm -y
sudo yum list docker-ce --showduplicates | sort -r docker-ce.x86_64 17.09.ce-1.el7.centos docker-ce-stable
sudo curl -L "https://github.com/docker/compose/releases/download/1.23.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
docker-compose --version
now=$(date +'%H:%M:%S')
echo -e "\e[1mStep 6 $now : installing nodejs\e[0m"
curl -sL https://rpm.nodesource.com/setup_20.x | sudo bash -
sudo yum install nodejs -y
node --version
now=$(date +'%H:%M:%S')
echo -e "\e[1mStep 8 $now : Installing npm\e[0m"
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
sudo nvm --version
sudo nvm install node
sudo nvm install --lts
sudo nvm install 9.6.7
now=$(date +'%H:%M:%S')
echo -e "\e[1mStep 7 $now : installing awscli\e[0m"
curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install
aws --version
now=$(date +'%H:%M:%S')
echo -e "\e[1mStep 9 $now : Enter your domain address to configure erxes\e[0m"
sudo npm install -g create-erxes-app -y
```
--------------------------------
### erxes Installation Script
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/deployment/deploymentDocker/page.mdx
A bash script to install necessary software including nginx, certbot, docker, docker-compose, nodejs, awscli, and npm. It also installs the create-erxes-app package globally.
```bash
#!/bin/bash
now=$(date +'%H:%M:%S')
echo -e "\e[1mStep 1 $now : Updating \e[0m"
sudo apt-get update -y
# nginx install
now=$(date +'%H:%M:%S')
echo -e "\e[1mStep 2 $now : Installing nginx\e[0m"
sudo apt install nginx -y
# docker install
sudo apt update -y
now=$(date +'%H:%M:%S')
echo -e "\e[1mStep 3 $now : Installing docker\e[0m"
sudo apt install apt-transport-https ca-certificates curl software-properties-common -y
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu focal stable"
apt-cache policy docker-ce
sudo apt install docker-ce -y
now=$(date +'%H:%M:%S')
echo -e "\e[1mStep 4 $now : Installing certbot\e[0m"
sudo apt install certbot python3-certbot-nginx -y
now=$(date +'%H:%M:%S')
echo -e "\e[1mStep 5 $now : Installing docker-compose\e[0m"
sudo apt-get update -y
sudo curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
now=$(date +'%H:%M:%S')
echo -e "\e[1mStep 6 $now : Installing nodejs\e[0m"
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
#new directory
sudo apt-get install nodejs -y
now=$(date +'%H:%M:%S')
echo -e "\e[1mStep 7 $now : Installing awscli\e[0m"
sudo apt-get install awscli -y
now=$(date +'%H:%M:%S')
echo -e "\e[1mStep 8 $now : Installing npm\e[0m"
sudo apt install npm -y
now=$(date +'%H:%M:%S')
echo -e "\e[1mStep 9 $now : Please enter erxes informations\e[0m"
sudo npm install -g create-erxes-app -y
create-erxes-app erxes
```
--------------------------------
### Simple Tabs Example
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/authentication/reference/ui/tabs/page.mdx
A basic example demonstrating how to use the Tabs and TabTitle components to create a simple tabbed interface. The `handleSelect` function is used to manage which tab's content is displayed.
```tsx
<>
handleSelect(0)}>Tab 1 handleSelect(1)}>Tab 2 handleSelect(2)}>Tab 3
{content}
```
--------------------------------
### Start erxes Development Server
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/groups/ubuntu/page.mdx
Run the erxes development server using the provided script.
```bash
./bin/erxes.js dev
```
--------------------------------
### Example configs.json for erxes Plugins
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/deployment/deploymentDocker/page.mdx
This JSON configuration shows how to define various plugins and their specific settings within the erxes application. It includes examples of common plugins and those requiring extra environment variables.
```json
{
"jwt_token_secret": "will be generated in configs.json",
"db_server_address": "ip address of your machine",
"image_tag": "dev",
"domain": "https://example.com",
"widgets": {
"domain": "https://example.com/widgets"
},
"elasticsearch": {},
"essyncer": {},
"redis": {
"password": "will be generated in configs.json"
},
"mongo": {
"username": "erxes",
"password": "will be generated in configs.json",
},
"rabbitmq": {
"cookie": "",
"user": "erxes",
"pass": "will be generated in configs.json",
"vhost": ""
},
"plugins": [
{
"name": "inbox",
"extra_env": {
"INTEGRATIONS_MONGO_URL": "will be generated in docker-compose-dbs.yml",
"FB_MONGO_URL": "will be generated in docker-compose-dbs.yml"
}
},
{
"name": "cards"
},
{
"name": "contacts"
},
{
"name": "internalnotes"
},
{
"name": "notifications"
},
{
"name": "automations",
"db_name": "erxes_automations"
},
{
"name": "products"
},
{
"name": "forms"
},
{
"name": "inventories"
},
{
"name": "segments"
},
{
"name": "tags"
},
{
"name": "engages"
},
{
"name": "logs",
"db_name": "erxes_logger"
},
{
"name": "clientportal",
"extra_env": {
"JWT_TOKEN_SECRET": ""
}
},
{
"name": "webbuilder"
},
{
"name": "knowledgebase"
},
{
"name": "emailtemplates"
},
{
"name": "integrations",
"db_name": "erxes_integrations",
"extra_env": {
"ENDPOINT_URL": "https://enterprise.erxes.io"
}
},
{
"name": "dashboard"
},
{
"name": "documents"
},
{
"name": "filemanager"
},
{
"name": "facebook",
"extra_env": {
"ENDPOINT_URL": "https://enterprise.erxes.io",
"MONGO_URL": "will be generated in docker-compose-dbs.yml"
}
}
]
}
```
--------------------------------
### Start Docker Services
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/groups/ubuntu/page.mdx
Starts the Docker services defined in the docker-compose.yml file in detached mode.
```bash
sudo docker-compose up -d
```
--------------------------------
### Switch to erxes User
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/page.mdx
Switch to the newly created 'erxes' user to continue with the installation process.
```bash
su - erxes
```
--------------------------------
### Navigate to Order Module
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/requirement/customer/sales/page.mdx
This example shows the implementation of a Button component linking to the order management module. Inline styles are used for customization.
```javascript
import { Button } from '@/components/Button'
// ...
```
--------------------------------
### HeaderDescription Usage Example
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/authentication/reference/ui/header/page.mdx
Demonstrates how to use the HeaderDescription component with an icon, title, and description.
```tsx
<>
```
--------------------------------
### Objective Spinner Example
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/authentication/reference/ui/spinner/page.mdx
Shows how to make a Spinner objective using the 'objective' prop.
```tsx
<>
```
--------------------------------
### Spinner Sizing Examples
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/authentication/reference/ui/spinner/page.mdx
Demonstrates how to change the size of the Spinner component using the 'size' prop.
```tsx
<>
```
--------------------------------
### Python Syntax Highlighting
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/pagination/docstyle/page.mdx
Example of Python code highlighting.
```tsx
s = "Python syntax highlighting"
print(s)
```
--------------------------------
### Basic Steps Component
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/authentication/reference/ui/steps/page.mdx
A simple example demonstrating the basic structure of the Steps component with multiple Step children.
```tsx
<>
children1children2children3
```
--------------------------------
### Configure Nginx for Erxes
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/deployment/deploymentDockerCompose/page.mdx
Move the example nginx.conf file generated by the Erxes CLI to the Nginx sites-enabled directory to configure your vhost.
```bash
sudo mv nginx.conf /etc/nginx/sites-enabled/erxes.conf
```
--------------------------------
### Copy Knowledgebase Install Code
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/conversations/page.mdx
This code is used to integrate the erxes knowledgebase into your website. It can be optionally configured with specific width and height settings.
```javascript
```
--------------------------------
### Spinner Positioning Examples
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/authentication/reference/ui/spinner/page.mdx
Illustrates how to adjust the Spinner's position using 'left', 'right', 'top', and 'bottom' props.
```tsx
<>
```
--------------------------------
### Copy Configuration Sample
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/groups/mac/page.mdx
Copy the sample configuration file to create the actual configuration file.
```bash
cp configs.json.sample configs.json
```
--------------------------------
### Container Component Example
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/sdks/creategen/page.mdx
This component handles data fetching and mutations for managing types. It uses react-apollo for GraphQL operations and UI components from '@erxes/ui'. Ensure necessary Apollo Client setup is in place.
```tsx
// path: ./packages/plugin-[pluginName]-ui/src/containers/SideBarList.tsx
import gql from 'graphql-tag';
import * as compose from 'lodash.flowright';
import { graphql } from 'react-apollo';
import { Alert, confirm, withProps } from '@erxes/ui/src/utils';
import SideBar from '../components/SideBar';
import {
EditTypeMutationResponse,
RemoveTypeMutationResponse,
TypeQueryResponse
} from '../types';
import { mutations, queries } from '../graphql';
import React from 'react';
import { IButtonMutateProps } from '@erxes/ui/src/types';
import ButtonMutate from '@erxes/ui/src/components/ButtonMutate';
import Spinner from '@erxes/ui/src/components/Spinner';
type Props = {
history: any;
currentTypeId?: string;
};
type FinalProps = {
listTemplateTypeQuery: TypeQueryResponse;
} & Props &
RemoveTypeMutationResponse &
EditTypeMutationResponse;
const TypesListContainer = (props: FinalProps) => {
const { listTemplateTypeQuery, typesEdit, typesRemove, history } = props;
if (listTemplateTypeQuery.loading) {
return ;
}
// calls gql mutation for edit/add type
const renderButton = ({
passedName,
values,
isSubmitted,
callback,
object
}: IButtonMutateProps) => {
return (
);
};
const remove = type => {
confirm('You are about to delete the item. Are you sure? ')
.then(() => {
typesRemove({ variables: { _id: type._id } })
.then(() => {
Alert.success('Successfully deleted an item');
})
.catch(e => Alert.error(e.message));
})
.catch(e => Alert.error(e.message));
};
const updatedProps = {
...props,
types: listTemplateTypeQuery.templateTypes || [],
loading: listTemplateTypeQuery.loading,
remove,
renderButton
};
return ;
};
export default withProps(
compose(
graphql(gql(queries.listTemplateTypes), {
name: 'listTemplateTypeQuery',
options: () => ({
fetchPolicy: 'network-only'
})
}),
graphql(gql(mutations.removeType), {
name: 'typesRemove',
options: () => ({
refetchQueries: ['listTemplateTypeQuery']
})
})
)(TypesListContainer)
);
```
--------------------------------
### Info Component API Import
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/authentication/reference/ui/info/page.mdx
Illustrates how to import the Info component from the 'erxes-ui' library. This is the required setup for using the component in your application.
```tsx
import Info from "erxes-ui/lib/components/Info";
```
--------------------------------
### Copy Environment Sample File
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/page.mdx
Copies the sample environment file to create a new environment file for configuration.
```tsx
cp .env.sample .env
```
--------------------------------
### Install Knowledgebase Code
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/conversations/script/page.mdx
Paste this code snippet into the top of the `` tag on your web page to integrate the Knowledgebase. This allows for optional width and height scaling.
```javascript
```
--------------------------------
### Deploy Databases with Erxes CLI
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/deployment/deploymentDockerCompose/page.mdx
Use this command to initiate the deployment of required database instances for Erxes.
```bash
npm run erxes deploy-dbs
```
--------------------------------
### Create New Plugin CLI Command
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/sdks/creategen/page.mdx
Use this command to initiate the plugin creation process via the CLI. It will prompt for necessary information to set up a new plugin.
```bash
cd erxes
yarn create-plugin
```
--------------------------------
### Initialize MongoDB Replica Set
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/deployment/deploymentDocker/page.mdx
Connects to the MongoDB instance within a container and initiates replica set configuration.
```bash
docker exec -it bash
mongo -u erxes -p
rs.initiate();
```
--------------------------------
### Error Response Example
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/errors/page.mdx
This is an example of an API error response. It includes the error type, a message, and a documentation URL for more information.
```bash
{
"type": "api_error",
"message": "No way this is happening!?",
"documentation_url": "https://protocol.chat/docs/errors/api_error"
}
```
--------------------------------
### Install erxes Web Messenger Code
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/groups/page.mdx
This code snippet is for installing the erxes web messenger. Paste it into the top of the body tag on your website.
```html
```
--------------------------------
### Multiple Attachments with Starting Index
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/authentication/reference/ui/attachment/page.mdx
Displays multiple attachments and specifies which attachment to start previewing from using the `index` prop. Index is zero-based.
```tsx
<>
```
--------------------------------
### Navigate to Project Folder
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/groups/mac/page.mdx
Change the current directory to the newly created erxes project folder.
```bash
cd example
```
--------------------------------
### Retrieve Attachment (JavaScript)
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/attachments/page.mdx
Use the JavaScript SDK to get attachment information. Instantiate the ApiClient with your token and call the get method with the attachment ID.
```javascript
import ApiClient from '@example/protocol-api'
const client = new ApiClient(token)
await client.attachments.get('Nc6yKKMpcxiiFxp6')
```
--------------------------------
### TypeForm Component Example
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/sdks/creategen/page.mdx
An example of a TypeForm component used for creating or editing types, including form fields and buttons. It utilizes various UI components from the '@erxes/ui' library.
```tsx
// path: ./packages/plugin-[pluginName]-ui/src/components/TypeForm.tsx
import { __ } from '@erxes/ui/src/utils/core';
import React from 'react';
import { IType } from '../types';
import { IButtonMutateProps, IFormProps } from '@erxes/ui/src/types';
import Form from '@erxes/ui/src/components/form/Form';
import {
ControlLabel,
FormControl,
FormGroup
} from '@erxes/ui/src/components/form';
import Button from '@erxes/ui/src/components/Button';
import { ModalFooter } from '@erxes/ui/src/styles/main';
type Props = {
renderButton: (props: IButtonMutateProps) => JSX.Element;
closeModal?: () => void;
afterSave?: () => void;
remove?: (type: IType) => void;
types?: IType[];
type: IType;
};
const TypeForm = (props: Props) => {
const { type, closeModal, renderButton, afterSave } = props;
const generateDoc = (values: {
_id?: string;
name: string;
content: string;
}) => {
const finalValues = values;
const { type } = props;
if (type) {
finalValues._id = type._id;
}
return {
...finalValues
};
};
const renderContent = (formProps: IFormProps) => {
const { values, isSubmitted } = formProps;
const object = type || ({} as any);
return (
<>
Todo Type
{renderButton({
passedName: 'type',
values: generateDoc(values),
isSubmitted,
callback: closeModal || afterSave,
object: type
})}
);
};
return ;
};
export default TypeForm;
```
--------------------------------
### Tabs with Darker Border Example
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/authentication/reference/ui/tabs/page.mdx
Demonstrates how to apply a darker border to the Tabs component using the `grayBorder` prop. This example also uses the `handleSelect` function to control the displayed content.
```tsx
<>
handleSelect(0)}>Tab 1 handleSelect(1)}>Tab 2 handleSelect(2)}>Tab 3
{content}
```
--------------------------------
### Create Project Folder
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/groups/mac/page.mdx
Create a new directory for your erxes project.
```bash
mkdir example
```
--------------------------------
### Full Width Tabs Example
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/authentication/reference/ui/tabs/page.mdx
This example shows how to make the tab titles display at full width using the `full` prop on the Tabs component. It utilizes the same `handleSelect` function for content management.
```tsx
<>
handleSelect(0)}>Tab 1 handleSelect(1)}>Tab 2 handleSelect(2)}>Tab 3
{content}
```
--------------------------------
### Checkout Development Branch
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/groups/mac/page.mdx
Switch to the 'dev' branch for development.
```bash
git checkout dev
```
--------------------------------
### Copy Knowledgebase Install Code
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/groups/page.mdx
Copy this code snippet to integrate the Knowledgebase feature. This code should be pasted at the top of the body tag in your web page source.
```javascript
```
--------------------------------
### Install erxes Chat Widget via Google Tag Manager
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/conversations/page.mdx
This code is for installing the erxes chat widget using Google Tag Manager. Paste this into a Custom HTML tag and configure it to trigger on all pages.
```html
```
--------------------------------
### JavaScript Function Highlighting
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/pagination/docstyle/page.mdx
Example of a JavaScript function that can be highlighted.
```tsx
function highlightMe() {
console.log('This line can be highlighted!');
}
```
--------------------------------
### Initialize Docker Swarm and Create Network
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/deployment/deploymentDocker/page.mdx
Initializes Docker Swarm mode and creates an overlay network for erxes services.
```bash
docker swarm init
docker network create --driver=overlay --attachable erxes
```
--------------------------------
### JavaScript Syntax Highlighting
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/pagination/docstyle/page.mdx
Example of JavaScript code highlighting.
```tsx
var s = 'JavaScript syntax highlighting';
alert(s);
)
```
--------------------------------
### Copy Knowledgebase Install Code
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/groups/page.mdx
This code snippet is for integrating the Knowledgebase feature. Ensure to copy the additional source code for section 'B' and paste it into the top of the body tag of your source code.
```html
```
--------------------------------
### Enable Plugins in CLI Configuration
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/sdks/creategen/page.mdx
Configure the 'plugins' section in cli/configs.json to specify which plugins run when erxes starts. This includes setting the UI to 'local' for development.
```json
{
"jwt_token_secret": "token",
"dashboard": {},
"client_portal_domains": "",
"elasticsearch": {},
"redis": {
"password": ""
},
"mongo": {
"username": "",
"password": ""
},
"rabbitmq": {
"cookie": "",
"user": "",
"pass": "",
"vhost": ""
},
"plugins": [
{
"name": "logs"
},
{
"name": "new_plugin",
"ui": "local"
}
]
}
```
--------------------------------
### Create New Plugin
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/sdks/page.mdx
Use this command to initiate the creation of a new plugin within your erxes-next project. Ensure you have erxes XOS installed prior to running this command.
```bash
cd erxes-next
pnpm create-plugin
```
--------------------------------
### Interval Input Type
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/authentication/graphql/input/page.mdx
Represents a time interval with a start and end time.
```APIDOC
## Input Type: Interval
### Description
Represents a time interval.
### Properties
- **startTime** (Date) - Description not provided
- **endTime** (Date) - Description not provided
```
--------------------------------
### Interval Arguments
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/authentication/graphql/queries/page.mdx
Defines the arguments for the Interval query, specifying a start and end time.
```APIDOC
## Interval
### Description
Represents a time interval with a start and end time.
### Arguments
#### Properties
- **startTime** (Date) - Description: The start of the interval.
- **endTime** (Date) - Description: The end of the interval.
```
--------------------------------
### Initialize Docker Swarm Mode
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/page.mdx
Initialize Docker swarm mode. Ensure you have run 'usermod -aG docker erxes' to avoid permission errors.
```bash
docker swarm init
```
--------------------------------
### Tip Placement - Auto
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/authentication/reference/ui/tip/page.mdx
The `placement` prop can be set to 'auto' for dynamic placement based on the viewport. This example demonstrates auto placement with a simple tip.
```tsx
<>
```
--------------------------------
### ExmEventDataInput
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/authentication/graphql/input/page.mdx
Input for event data, including start and end dates, visibility, and filtering conditions.
```APIDOC
## ExmEventDataInput
### Description
Input for event data, including start and end dates, visibility, and filtering conditions.
### Properties
- **endDate** (Date) - Description not provided.
- **startDate** (Date) - Description not provided.
- **visibility** (String) - Description not provided.
- **where** (String) - Description not provided.
```
--------------------------------
### Breadcrumb Example
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/authentication/reference/ui/breadcrumb/page.mdx
Renders a breadcrumb with multiple items. The last item is active as it does not have a 'link' prop.
```tsx
```
--------------------------------
### Configure UI for Plugins
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/quickstart/groups/mac/page.mdx
Add the 'ui': 'local' setting under each plugin name in the configs.json file, except for the 'logs' plugin.
```json
{
"name": "inbox",
"ui": "local"
}
```
--------------------------------
### Completed Timer Example
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/authentication/reference/ui/timer/page.mdx
Displays the TaskTimer component in a 'completed' status. Use this to show a task that has finished.
```tsx
<>
```
--------------------------------
### PHP Request to Create Attachment
Source: https://github.com/erxes/erxes-docs/blob/main/src/app/attachments/page.mdx
This PHP example illustrates creating an attachment with the Protocol API. Initialize the ApiClient with the provided token and pass the file to the create method.
```php
$client = new \Protocol\ApiClient($token);
$client->attachments->create([
'file' => $file,
]);
```