metasfresh / metasfresh-webui-frontend-legacy

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

Build

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/

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)

Notice: CI/CD legacy

Submodule meta-frontend-ansible.git and .gitlab-ci.yml file are legacy of CI/CD.

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 container for displaying single document 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 set of sections, columns, element's groups, element's lines and widgets (these are defined by 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/Dockerfile-env.

Thanks to issue #1013 and Seweryn Zeman.

metasfresh-webui-frontend-legacy's Issues

DocAction dropdown shows nothing

This is related to #36 .

See screenshot:

Url gets wrong after pressing New again

Advanced Edit isActive Flag 100%

In Advanced Edit (example opened from GridView), the isActive Flag is rendered in 100% witdh. Should not be. Must stay small and compact like flags.

List widgets shall not call /dropdown each time when it's clicked

... and they shall cache the result of the /dropdown in component's internal state.
Also they shall rely and reset that state based on field's "lookupValuesStale" property (which u get on /commit and /data).

Agree on a json window specification.

Optimization: handle dynamic widgets and elementsGroups hiding

1. Handle "case when the fields will be hidden dynamically".

2. "We have the case when the fields will be hidden dynamically and if all of them are hidden, then the entire group shall be hidden."

3. If /api/window/{n} returns empty section/column/elementGroup – treat is at it doesn't exist.

Some fields are not set while setting the BPartner

case:

• new sales order
• start setting the bpartner => /commit with (bpartner) and as a response you get a lot of fields already filled, including warehouse
• NOK: warehouse field not set

Save indicator

A small indicator showing user that this document is saved or save is in progress. Important to make user more comfortable with auto-save.

No commit is issued when a field is cleared

Advanced edit

Advanced Edit Functionality
Button as seen in the Layouts (with additional Popup for detail fields)

ToDo
a) talk about layout/ design/ concept
b) implement

Menu no links lower than home-menu

In the Menu there are no links lower than home-menu.

BPartner Location field is not rendered but only the BPartner

Fields edited in advanced mode are not propagated back to single row layout

case:

• open advanced edit for sales order
• set warehouse (NOTE: the /commit is issued)
• press 'Done'
• NOK: warehouse was not set
• open advanced editing again
• OK: the warehouse is there

Info placeholders for empty datasets

Bill partner is not updated when setting the partner

... even though the bill address was set

See attached screenshots.

Buttons for triggering modal popup layouts

To be used with:

• advanced edit
• generic "add new"

Need this to be provided from API. TODO: Agree on API format for this.

Got a /commit error when loading an existing document

Pressing new line on Order tax tab is creating a new line in order lines

Expectation: it shall throw exception because the tab is readonly and the API is throwing exception.

Optimization: commit back only when a field is really changed

test case:

• click on OfferValidDays which displays "0"
• click on some other field
• NOK: a commit with {op: "replace", path: "OfferValidDays", value: "0"} is issued
• expectation: no commit shall be issued

Breadcrumb captions shall render the "captionBreadcrumb" instead of "caption"

Product window - Subtab Prices

M_Product_ID content and isActive Flagnot shown in data row.

Container without children shouldn't be rendered.

Container without children shouldn't be rendered.

Checkbox values are not sent back to server

i.e. the "/commit" request content is empty.

Color adjustment in date-range-picker

Color adjustment in date-range-picker
pls adjust the apply color.

Adjust Padding/ Margin in Navigation Menu needed

Please adjust Padding/ Margin in Navigation Menu.

New Button, advanced edit collapse menu

When u open menu (top left button) and press New or advanced edit, i believe that the menu should collapse/ dissapear after that.
Other menu entries that should behave like that?

For each /commit there are 2 requests sent

For each /commit there are 2 requests sent:

• one with Request Method: OPTIONS
• the other with Request Method: PATCH (the actual one)

Is that OK?

"Saved" element next to sidelist button

What is this element for? Did not see that in design yet. Is this only for development purpose?

Include .htaccess to src/

RewriteEngine On

If an existing asset or directory is requested go to it as it is

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

If the requested resource doesn't exist, use index.html

RewriteRule ^ /index.html

Home Button shall not be tied to Root Name

Seems as if Home Button only appears when Root Node Name is "Menu".
Please change to recognize more reliable e.g. just on the first node. wdyt?

System information texts

How will we get system information texts like:

• text for info about empty dataset in table (i.e. no order lines)

Tab table row appearance

• Excel like behaviour. Avoid cells expanding unnaturally in height, width.
• Subtab component. Initial size fill 100% of remaining window space or fixed size.

Change frontend URL policy

/window/143/new - new 143 doc type form
/window/143/{id} - open 143 doc type {id} form
/window/143 - list of 143 doc type

Table selection: re-enable, improve behavior, add right-mouse-click menu

To fulfill requirements for:

• deleting
• advanced edit of doc line

Discuss batch operations

Important for select doc lines.

IsDropShip Flag not initially set in Frontend

IsDropShip Flag not initially set in Frontend (Sales Order), although in response.

{field: "IsDropShip", value: true, readonly: false, mandatory: true, displayed: true,…}

Example: Window 143, ID 1001573

Some fields are displayed when they should not

e.g. Ref_Order_ID

Search Results showing Groups instead of Groups/ Leafs

Search Results showing Groups instead of Groups/ Leafs.
Pls Fix.

Implement column sorting for grid views

(See metasfresh/metasfresh-webui-api-legacy#27 )

(1) When the grid view is loaded, automatically set the sort indicators, as they were provided by "GET /rest/api/window/view/{viewId}" response, orderBy field.
It's format is:

[
{
"ascending": true,
"fieldName": "string"
}
]

(2) When clicking on a column, it shall be sorted ascending/descending. For that, you shall call "GET /rest/api/window/view/{viewId}" as usual, but also provide the ?orderBy=... parameter.

Number Fields with digits precision missing digits in Layout

For example Products window Field PriceList, PriceStd. Should have digits (in current case at least 2, defined by currency precision).

Mandatory Fields Information

Mandatory Fields Information
How are the mandatory fields distinguished when left empty (which prohibits data saving)?
atm you ca

a) talk about design, layout (empty, filled)
b) implement

Changing protocol messages for /dropdown and /typeahead

Abstract: atm we are returning an array of { value: name } pairs.

Change: we need to wrap that in map because along with the value/name pairs we want to provide more attributes. Atm will be just debug properties, but we really need them to figure out how our internal logic was evaluated.

e.g.

{
    debug-property1: bla bla
    ....
    values : [
        { "value1" : "name1" },
        { "value2" : "name2" },
        ...
    ]
}

PaymentRule button text is not rendered

PaymentRule button text is not rendered even though /commit response sent a value for it:

{field: "PaymentRule", value: {P: "P_On Credit"}, value-reason: "direct set from document wrapper",…}
debug-field-info
:
"DocumentField{fieldName=PaymentRule, documentPath=DocumentPath{AD_Window_ID=143, documentId=1000285}, value=null, initalValue=null, mandatory=LogicExpressionResult{value=false, expression=FALSE}, readonly=LogicExpressionResult{value=false, expression=FALSE}, displayed=LogicExpressionResult{value=false, expression=FALSE}}"
displayed
:
true
displayed-reason
:
"TriggeringField=null, DependencyType=DisplayLogic, EvaluationResult=LogicExpressionResult{value=true, expression=TRUE}"
field
:
"PaymentRule"
lookupValuesStale
:
true
lookupValuesStale-reason
:
"TriggeringField=null, DependencyType=LookupValues"
mandatory
:
true
mandatory-reason
:
"TriggeringField=null, DependencyType=MandatoryLogic, EvaluationResult=LogicExpressionResult{value=true, expression=TRUE}"
readonly
:
false
readonly-reason
:
"direct set from document wrapper"
value
:
{P: "P_On Credit"}
value-reason
:
"direct set from document wrapper"

Pulse effect when content changes (Callout, Modelvalidator)

How about having some kind of soft pulse effect when field content changes after callout or modelvalidator? This could allow the user to see/ feel what the system does for him in the background.

Implement side list panel

Implement side list panel to be able to browse existing documents

Breadcrumb and Pencil Field (Value, Documentno) Layout

a) "Pencil Field" Should be in same Line as breadcrumb.
b) The Fon size of breadcrumbs is a bit too small. Design had same size as Labels Fontsize.

Accessing site root returns empty page

Tried with:

• http://localhost:3000/
• http://w101:8090/

=> both render empty page:

Implement a way to browse existing documents

Suggestion:

• current URL looks like this: http://.../window/143
• we shall change it to http://.../window/143/documentId

wdyt?

Modal popup layout generator

A layout generator inside a modal popup for things such as:

• advanced edit
• generic "Add new"

Encode URL parameters before calling the REST API

Failing test case:

• open sales order window
• in BPartner field type "%" (without quotes)
• frontend is calling http://w101.metasfresh.com:8081/rest/api/window/typeahead?type=143&id=1002087&field=C_BPartner_ID&query=%
• NOK: server error:

org.springframework.web.util.NestedServletException: Request processing failed; nested exception is java.lang.IllegalStateException: Could not get HttpServletRequest URI: Malformed escape pair at index 104: http://w101.metasfresh.com:8081/rest/api/window/typeahead?type=143&id=1002087&field=C_BPartner_ID&query=%