biz-docs-ui-react
v0.3.4
Published
## Available Scripts
Downloads
50
Readme
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)])
whereperms
is an array of string-like permissions anduserId
(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
, whereorgNumber
should be passed from your app.
- default:
- env (optional, string) - which environment to use. Default is
prod
. Choices aredev|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
andchildren
recursively or finish with one level
- you can repeat same structure with
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 attachFeature 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
inviewers
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
inviewers
means that direct shareholders and shareholding companies have view access. And shareholding companies means theirs admins.