bogdanmartinescu / metasfresh-webui-frontend

metasfresh Webui Frontend

Metasfresh Front-end Application

For webui-frontend developers

Init

• Install dependencies

npm install

• Create config. In that case run:

cp src/config.js.dist src/config.js

Dev environment

• install npm and node.js

• make sure you have all dependencies by:

npm install

• Then remember of creating config:

cp /config.js.dist /config.js

• Then you should run node server by:

npm start

Production environment

When running in production mode you will need to build the static version of the app and serve it from an http-compatible server. Here's a quick guide how you can run production mode locally.

Building

In case of static version building execute (you are going need Webpack installed globally):

webpack --config webpack.prod.js

And after that we need config.js in dist folder

cp /config.js.dist /dist/

Running

The easiest way to test production build is by serving it via a simple http-server. You can install it globally with npm :

npm install http-server -g

and then run it pointing to your dist folder:

http-server ./dist

Now open your browser and go to localhost:8080 to see the application running.

Testing

Application comes with a set of tests, both unit as well as functional.

Cypress e2e tests

Actual cypress tests reside in the metasfresh-webui-frontend repo.

Contribution

Remember to ensure before contribution that your IDE supports .editorconfig file, and if needed fix your file before commit changes.

Also remember to respect our code-schema rules. All of them are listed in eslint and stylelint config files. To use them, just run:

npm run-script lint

npm run-script stylelint

(first one is also autofixing when possible)

Dictionary

Project has a generic structure. Name of components and their containers should be strictly defined and keep for better understanding.

MasterWindow - (e.g. /window/143/1000000) It is the container for displaying a single document view (document main view, detailed view).

DocList - (e.g. /window/143/) It's a view with a list of documents kept in table.

DocumentList - It is a component that combining table for documents, filters, selection attributes, etc...

Window - It is a component that is generating a set of sections, columns, elements groups, elements lines and widgets (these are defined by the backend layout)

Widget - (MasterWidget, RawWidget) It is a component for getting user input.

Header - It is a top navbar with logo.

Subheader - It is a part of Header and is toggled by button with a home icon.

Sidelist - Toggled by button with hamburger menu icon in Header. It is collapsing panel situated on right side of 'browser window'.

MenuOverlay - These are components that float over Header and contain navigation links, triggered from breadcrumb.

SelectionAttributes - It is a panel that might contain Widgets and it is a side by side table in DocumentList.

Schema

• MasterWindow
  • Container
  • Window
• DocList
  • Container
  • DocumentList

---

• Container
  • Header
  • Modal
  • RawModal
• Window
  • Widget
  • Tabs
• DocumentList
  • Table
  • Filters
  • SelectionAttributes

---

• Header
  • Subheader
  • Sidelist
  • Breadcrumb
    • MenuOverlay
• Modal
  • Window
  • Process
• RawModal
  • DocumentList

For webui-api developers

If you are developing against the metasfresh-webui-api, you might want to run the webui-frontend without locally installing node and npm. If you have a docker host, you can do so by checking out this repository and then following the instructions in the docker file docker/nginx/Dockerfile.