Fastflow-package NPM

Fastflow

Fastflow is a TypeScript library that integrates with the Workflow module.

Installation

Run the npm installation command to setup your project.

npm i fastflow-package

Usage

Once the package is installed, you can import the library from fastflow-package:

import { 
    initWorkflowApp, 
    sendFormIdToChild 
} from 'fastflow-package'

The initWorkflowApp function should be called when you want to start working with the Workflow Module or open the Workflow Application Window.:

/**
 * Initializes the workflow app by opening a child window and sending data to it.
 * @param data - The data to be sent to the child window.
 * @param cancelEvent - The function to be called when the child window triggers 'cancelForm' event.
 * @param submitEvent - The function to be called when the child window triggers 'submitForm' event.
 * @param createFormEvent - The function to be called when the child window triggers 'createForm' event.
 */
const initWorkflowApp = async (
    data: any, // will define type later
    cancelEvent: () => Promise<void> | void,
    submitEvent: () => Promise<void> | void,
    createFormEvent: () => Promise<void> | void
)

Description: the data parameter is defined by a generic type called TChildData, and here's what the type looks like:

type TChildData = {
    user: User;
    form: TForm;
    inputFields: TInputField[];
}

type TUser = {
    name: string;
    companyName: string;
    companyId: number;
    baseURL?: string;
}

type TForm = {
    id: number;
}

type InputType = 'text' |
    'password' |
    'checkbox' |
    'switch' |
    'select' |
    'input' |
    'newselect' |
    'newmultiSelect';

type TInputField = {
    label: string;
    fieldName: string;
    value: any;
    inputType: InputType;
}

As you can see, the initWorkflowApp() function requires four parameters, and sendFormIdToChild() is typically used within the createFormEvent() or wherever it can send the formId when the createForm event is triggered:

/**
 * Sends the form ID to the child window.
 * @param formId - The ID of the form to send.
 */
const sendFormIdToChild = async (formId: number)

Example

Description: The submitHandler function triggers the openWorkflowApp function with structured structureData. Within the openWorkflowApp function, the logic for structuring data to match specified parameters is expected to be implemented.

import { 
    initWorkflowApp, 
    sendFormIdToChild 
} from 'fastflow-package'

submitHandler = async () => {
    await this.openWorkflowApp({ ...structureData })
}

openWorkflowApp = async (structureData) => {
    // ... (The logic for structuring the `data` to match the specified parameter type.)

    await initWorkflowApp(
      { ...data }, 
      this.cancelEventWorkflowApp, 
      this.submitEventWorkflowApp, 
      this.createFormEventWorkflowApp
    )
};

This is what the data looks like in JSON:

{
    "user": {
        "name": "admin",
        "companyName": "ABC Company",
        "companyId": 1
    },
    "inputFields": [
        {
            "label": "Example Name",
            "value": "Example-01",
            "inputType": "input",
            "fieldName": "example_name"
        },
        {
            "label": "Company",
            "value": "01 - ABC Company",
            "inputType": "newselect",
            "fieldName": "company_id"
        },
        {
            "label": "Permission",
            "value": ["Admin", "Guest"],
            "inputType": "newmultiSelect",
            "fieldName": "roles"
        },
        {
            "label": "Active",
            "value": true,
            "inputType": "checkbox",
            "fieldName": "is_active"
        }
    ]
}

These are the other three parameters. The createFormEventWorkflowApp() calls the createObject() API and uses a then approach to trigger sendFormIdToChild (formId).:

  cancelEventWorkflowApp = () => {
    this.closeModal()
    this.props.setLoading(false);
  }

  submitEventWorkflowApp = () => {
    this.closeModal()
    this.props.setLoading(false);
  }

  createFormEventWorkflowApp = async () => {
    const dataPayload = data
    await this.props.createObject({ ...dataPayload }).then(res => {
      const formId = res.data.form_id
      sendFormIdToChild(formId);
    })
  }