biz-docs-ui-react v0.3.4

Documents UI for BizBot

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

yarn publish:npm

Builds module for using within React apps. Usage:

import BizDocsUI from 'biz-docs-ui-react';

<Wrapper>
  <BizDocsUI appToken="<appToken>" />
</Wrapper>

yarn build

Builds stand-alone script for browsers. Usage: 1) Load script on your html page 2) window.bizSDK.renderDocsUI({ ...params })

Parameters

• rootDomId (required, string) - parent DOM where to render the App. Is for stand-alone JS version only.
• appToken (required, string) - token of registered application. Ask support if you don't have your app registered yet
• permsFilter (required, func) - determines context and which data user should work with:
  • default: (perms, userId) => ([String(userId)]) where perms is an array of string-like permissions and userId(int) is id of current user. Returns everything for user context only.
  • returns: array of string-like permissions In order to return data for company context use () => orgNumber, where orgNumber should be passed from your app.
• env (optional, string) - which environment to use. Default is prod. Choices are dev|stage|prod|local.
• userToken (optional, string) - default is cookie, so you don't need to care about it when using together with BizSDK. You can also pass user token there.
• docsApiUrl (optional, string) - custom URL of Docs API. You can't use it if you are not from BizBot dev team.
• queryApiUrl (optional, string) - custom URL of Core Query API. Also useless if you are not from BizBot dev team.
• shared (optional, bool) - should the "Shared with you" docs be shown. Default is true
• search (optional, bool) - show search bar. Default is true
• title (optional, string) - main title
• subtitle (optional, string) - main subtitle
• titleShared (optional, string) - "Shared with you" docs block title
• showViewer (optional, bool) - show big viewer on right side. Default is false
• onChooseNodeSubmit (optional, func) - switches to choose mode, where this function returns chosen folder/file
• choosableNodeType (optional, string) - values are file || folder || undefined.
• dimViewers (optional, bool) - default is false. If folders/files have viewer perms only - shows dimmed and does not allow to choose those.
• multiChoose (optional, bool) - default is false. Ability to choose several entities at once
• showChooseButtons (optional, bool) - default is 'false'. Show confirm buttons at footer
• chooseButtonTitle (optional, string) - default is OK.
• onChooseCancel (optional, func) - show cancel button and what to do on click
• systemFolder (optional, dict) - system folders structure. When it's set, the app tries to find existing system folders within specified context and creates not existing ones. Note that on enabling system folder shared files becomes disabled. - name (required, string) - default folder name. Will be user once to create folder if it does not exists - context (required, dict) - {key: } which will be used to identify folder. Note that the last children context will be used as default context on creating folders and uploading files - owners (required, array) - admin permissions array for specified folder - viewers (optional, array) - read-only permissions array for specified folder - children (optional, dict) - you can repeat same structure with name, context, owners and children recursively or finish with one level

Full example of systemFolder, where we have a parent company folder with folder for transactions with folder for specified transaction, where sides of agreement have read-only access:

{
  "name": "My Company AS",
  "context": {
    "orgNumber": "NO123456789"
  },
  "owners": ["NO123456789:CEO", "NO123456789:Chairman"],
  "viewers": ["NO123456789"],
  "children": {
    "name": "Transactions",
    "context": {
      "transactions": "NO123456789"
    },
    "owners": ["NO123456789:CEO", "NO123456789:Chairman"],
    "children": {
      "name": "Transaction 20-03-2020",
      "context": {
        "transaction": 142
      },
      "owners": ["NO123456789:CEO", "NO123456789:Chairman"],
      "viewers": ["59882", "NO987654321:Chairman", "NO987654321:CEO"]
    }
  }
}

NOTE that all the TOKENS are secret and should never appear in HTML code as it's not secure

Requirements

Module is designed for usage together with BizSDK.

In case you'd like to use it without BizSDK:

• you need to have Bootstrap 4 stylesheets and scripts on your html page
• use theme https://dashkit.goodthemes.co/, otherwise you need to attach Feature icons like it's done in example on /public/stand-alone.html

Syntax of permission directives

All the permissions are strings;

• user_id - e.g. 55312
• org_number:asset - means that user has asset in that company. So having NO123:Shares in viewers means that direct shareholders has view access.
• org_number?alias - means that the system has to collect data about final look of permissions. E.g. NO123?Shares in viewers means that direct shareholders and shareholding companies have view access. And shareholding companies means theirs admins.