FinlexFileManager (@finlexlabs/file-manager)

Library Name: finlex-file-manager Package Name: @finlexlabs/file-manager Repo Name: fx-ng-components

Steps to Build & Publish Library

Package Renaming

Go to src/finlex-file-manager/package.json Rename package name from finlex-file-manager to @finlexlabs/file-manager

Build

npm run build:file-manager

It will build finlex-file-manager using ng-packagr. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with npm run build:file-manager, go to the dist folder cd dist/finlex-file-manager and run npm publish.

--

Finlex File Manager

Input bindings for component

1. fileManagerBaseUrl (type: string, required: true) -> File Manager endpoint with GET, POST and PUT, DELETE methods.
2. componentType: (type: string, required: true) -> The entity name and path
3. componentId: (type: string, required: true) -> The entity id
4. componentIds: (type: Array, required: false) -> List of entity ids
5. editMode: (type: boolean, required: false) -> Show the file uploader when edit mode is true.
6. useOldRoutes: (type: boolean, required: false) ->
   • true: use routes of file-manager inside contract-manager
   • false/default: use new routes under s3-integration-service
7. additionalReferences (type: Array, required: false) -> To pass aditional references for the same file.
8. displayConfig (type: FileManagerDisplayConfig, required: false) -> To change the default look and feel behavior of the files list.
9. defaultFileCategory (type: string, required: false) -> To save file category name with the file and file reference.
10. showLatestFileOnly (type: boolean, required: false) -> To show only the latest file (1 only).

Display config

The display config has the following properties which can be used to hide specific elements:

• informationBar -> The information bar including the cagtegory filter and total file sizes.
• category -> The category name next in the files list.
• viewButton -> The view button in the files list.
• downloadButton -> The download button in the files list.
• deleteButton -> The delete button in the files list.
• fileSize -> The individual file size below the file name in the files list.

Additionally following properties can also be passed to change the look and feel

• disableHoverMode -> The overall hover mode gets disabled which includes the show and hide of view, download, and delete button.
• fileIcon -> The file icon before the file name in the files list. A mat icon name is required here.
• themeColor -> The color in hex format.
• filesListPosition -> 4 possibilities to show the files list: TOP, BOTTOM, LEFT, RIGHT. Default is Right.

An example of display config.

  fileManagerDisplayConfig: FileManagerDisplayConfig = {
    hide: {
      informationBar: true,
      fileSize: true,
      category: true,
      deleteButton: true,
    },
    disableHoverMode: true,
    fileIcon: 'picture_as_pdf',
    themeColor: '#FF0000',
  }