adempiere / adempiere-vue Goto Github PK

Greetings, it is proposed to implement a dynamic component that calls using lazy load to field components based on ADempiere references. This component will be the one that communicates the fields with the views, taking the main validations as read only, visualization and obligatory and showing the reference of the appropriate field.

By loading the fields and their metadata from the application dictionary. There with the attribute 'displayType' is assigned the attribute 'componentPath'.
https://github.com/adempiere/adempiere-vue/blob/develop/src/utils/ADempiere/index.js#L336

The path of the component to be displayed is stored in the 'REFERENCES' constant, which returns the path of the component (in the type attribute) according to the type of display (in the attribute alias or id of the reference).
https://github.com/adempiere/adempiere-vue/blob/develop/src/components/ADempiere/Field/references.js#L3

With the generic label 'component' and the path of the component to import in the attribute 'is', it performs the rendering to visualize the reference of the appropriate field.
https://github.com/adempiere/adempiere-vue/blob/develop/src/components/ADempiere/Field/index.vue#L29

For more information: https://vuejs.org/v2/guide/components-dynamic-async.html

As a result it will show the different types of fields associated with the references.

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:

• ADempiere
  
• Bootstrap Vue
  
  
• Element
  
  
  
• Framework7
  
  
• iView
  
  
• Vue Material
  
• Vuetify
  

handle context variables in the client based on session storage

Hello, it is proposed to migrate the Image component, this will support the data imported from gRPC and will conform to the ADempiere standards. Supported for JPG.PNG.BMP.GIF type image format, among others

• ADempiere
  

• Element-UI
  https://element.eleme.cn/#/en-US/component/upload

• ADempiere-Vue
  
• ADempiere-Vue (Mobile)
  

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:

• ADempiere
  

• Bootstrap Vue
  

• Element
  
  
  

• Framework7 (nothing)

• iView
  
  
  
  

• Vue Material
  
  

• Vuetify (nothing)

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:

• ADempiere
  
• Bootstrap Vue
  
• Element
  
  
  
• Framework7
  
• iView
  
  
• Vue Material
  
• Vuetify
  

It is proposed to migrate the Image component, this will support the data imported from gRPC and will conform to the ADempiere standards.

• ADempiere
  

• Element-UI
  https://element.eleme.cn/#/en-US/component/input
  

• ADempiere-Vue
  

• ADempiere-Vue (Mobile)
  

Hello, the migration of the ADempiere list type component will be performed, based on Vuejs and Element-UI for the new ADempiere UI.

ADempiere

Element-UI

ADempiere Vue Desktop

ADempiere Vue Mobile

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:

• ADempiere
  

• Bootstrap Vue
  

• Element
  
  

• Framework7
  

• iView
  

• Vue Material
  

• Vuetify
  
  

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:

• ADempiere
  
• Bootstrap Vue
  
  
  
• Element
  
  
  
• Framework7
  
  
• iView
  
  
• Vue Material
  
• Vuetify
  
  

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:

• ADempiere
  

• Bootstrap Vue
  
  

• Element
  

• Framework7
  

• iView
  

• Vue Material
  

• Vuetify
  
  
  

hello, it is necessary to perform the migration of the binary component (file upload) for this a gRPC-based service is configured that can send the data from the file to the server.

ADempiere

Element-UI

ADempiere-Vue Desktop

ADempiere-Vue Mobile

Hi here, the traditional checkbox is changed by if which will decide for a yes or no

• ADempiere

• Element-UI

• https://element.eleme.cn/2.7/#/en-US/component/switch

• ADempiere-Vue
  

• ADempiere-Vue mode Mobile
  

Hello, it is necessary to perform the migration of the memo component that allows a long text - String of up to 250 characters, this is based on the JavaScript framework called vue.js and element-ui templates

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:

• ADempiere
  

• Bootstrap Vue
  
  
  
  
  

• Element
  
  

• Framework7
  
  

• iView
  

• Vue Material
  

• Vuetify
  
  

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:

• ADempiere
  

• Bootstrap Vue
  

• Element
  

• Framework7 (nothing)

• iView
  
  
  

• Vue Material
  

• Vuetify
  

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:

• ADempiere
  
• Bootstrap Vue
  
• Element
  
• Framework7
  
• iView
  
• Vue Material (nothing)
• Vuetify (nothing)

Hi @yamelsenih ,
I have made a comparison for smart icons.
And the result is https://feathericons.com
A lot of b/w svg icons - this are similar to the web ui icons of adempiere and for vue : https://github.com/mage3k/vue-feather-icon

In https://klst.gitbook.io/adempiere/glossar you con see some comparison between icons used in swing, in web-ui and the feather suggestion:

If you do not like b/w icons, close this idea.
Regards Eugen

Hello, it is necessary to migrate the quantity component, this will support the data imported from gRPC and conform to ADempiere standards.

ADempiere

Element-UI
Element Component

ADempiere-Vue Desktop

ADempiere-Vue Mobile

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:

• ADempiere
  

• Bootstrap Vue
  

• Element
  

• Framework7 (nothing)

• iView (nothing)

• Vue Material (nothing)

• Vuetify
  

the host was modified to be visible through the network for tests between different cilents.

the commit associated with this issue is 4e87dd

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:

• ADempiere
  
  
• Bootstrap Vue
  
  
• Element
  
• Framework7
  
• iView
  
  
  
• Vue Material (nothing)
• Vuetify
  
  

Hello, with the date component it is required that you extract the date data imported from the .JSON file, with its format of yyyy-mm-dd as shown in the image acontinacion

• ADempiere-Vue
  

• Element-UI

https://element.eleme.cn/#/en-US/component/date-picker

• ADempiere-Vue
  
• ADempiere-Vue mode Mobile

Best Regard.

Hello, it is required to migrate the ADempiere component of colors, based on Vuejs and Element UI.

ADempiere

Element

ADempiere Vue Desktop

ADempiere Vue Mobile

Hello, it is necessary to migrate the entire component, this will support data imported from gRPC and must conform to ADempiere standards. It should not allow decimal values.

ADempiere

Element-UI

ADempiere-Vue Desktop

ADempiere-Vue Mobile

This is a definition wthi some Attributes that will be added to new UI:

Column Supported Attributes

• Column Identifier = "AD_Column_ID"
• Column Identifier = "UUID"
• Column Name = "ColumnName"
• Column SQL = "ColumnSQL" (Is no good added as UI)
• Display Type = "DisplayType"
• Mandatory Property = "IsMandatory"
• Default Logic = "DefaultLogic"
• IsUpdateable = "IsUpdateable"
• IsAlwaysUpdateable = "IsAlwaysUpdateable"
• Name = "Name"
• Description = "Description"
• Help = "Help"
• Is Key = "IsKey"
• Is Parent = "IsParent"
• Is Translated = "IsTranslated"
• Is Encrypted = "IsEncrypted"
• Is Allow Logging = "IsAllowLogging"
• Validation Code = "ValidationCode"
• Field Length = "FieldLength"
• Value Min = "ValueMin"
• Value Max = "ValueMax"
• Allow Copy = "IsAllowCopy"
• Format Pattern = "FormatPattern"
• Context Info Script = "ContextInfoScript"
• Context Info Formatter = "ContextInfoFormatter"

Field Additional Supported Attributes

• Field Only = "IsFieldOnly"
• Display Logic = "DisplayLogic"
• Display Length = "DisplayLength" (Old value)
• Seq No = "SeqNo"
• Sort No = "SortNo"
• Info Factory Class = "InfoFactoryClass" (Old value)
• Read Only = "IsReadOnly"

Components to migrate from ADempiere Vue.js:

• ADempiere (nothing)
• Bootstrap Vue
  
• Element
  
• Framework7
  
• iView (nothing)
• Vue Material (nothing)
• Vuetify
  
  

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:
Used for show a number of notification opening

• ADempiere
  
• Bootstrap Vue
  
• Element
  
  
• Framework7
  
  
  
• iView
  
  
  
• Vue Material
  
  
• Vuetify
  
  
  

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:

• ADempiere
  
• Bootstrap Vue
  
• Element
  
  
  
  
  
• Framework7
  
• iView
  
• Vue Material
  
• Vuetify
  

Hello, it is necessary to migrate the text string component to the new version of the UI based on Vuejs and Element UI

ADempiere

Element-UI

ADempiere Vue Desktop

ADempiere Vue Mobile

Hello, It is required to migrate the time picker component, using the Element design template, based on ADempiere standards and it can read data from the gRPC server.

ADempiere

Element-UI

ADempiere-Vue Desktop

ADempiere-Vue Mobile

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:

The Tables can be used for show information as grid.
Anatomy
Thead: Header.
Tbody: Body for table.
Tr: Row.
Td: Column.

• ADempiere
  
• Bootstrap Vue
  
• Element
  
• Framework7
  
  
• iView
  
  
• Vue Material
  
• Vuetify
  

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:

• ADempiere
  
• Bootstrap Vue
  
  
  
• Element (nothing)
• Framework7 (nothing)
• iView
  
• Vue Material
  
• Vuetify
  

Date Picker: Used for set a date or time

• ADempiere
  
  
• Bootstrap Vue (nothing)
• Element
  
  
  
  
• Framework7
  
  
• iView
  
  
  
  
  
• Vue Material
  
  
• Vuetify
  
  

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:

• ADempiere
  
  
• Element
  
• Bootstrap Vue
  
• Collapse - Framework7
  
• Collapse - iView
  
• Collapse - Vuetify
  
  

hello, it is necessary to migrate the quantity component, this will support the data imported from gRPC and adapt to the ADempiere standards.

• ADempiere
  

• Element-UI
  

• ADempiere-Vue
  

• ADempiere-Vue mode Mobile
  

It is proposed to migrate the DateTime component, this will support the data imported from gRPC and will conform to ADempiere standards

• ADempiere
  

• Element-UI
  https://element.eleme.cn/#/en-US/component/datetime-picker
  

• ADempiere-Vue
  

• ADempiere-Vue mode Mobile
  

Based on https://github.com/vuejs/awesome-vue#frameworks this issue is created for document a choice of framework to be used, see it:

All frameworks are selected from Official Github page of Vue

You can see a little comparison of use and start rating from NPM download here

• Element:

  • Official Page
  • Github Project
  • Implementation
  • Github Project Implementation
  • 

• Bootstrap Vue:

  • Official Page
  • Github Project

• Framework7(Have Mobile framework):

  • Official Page
  • Github Project
  • 

• iView:

  • Official Page

• Vue Material

  • Official Page
  • Github Project
  • 

• Vuetify

  • Official Page
  • Github Project
  • 

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:

Text Area: Can be used for entry information with many characters.
Anatomy
Label: Identify Field.
Box: Used for entry key

• ADempiere
  

• Bootstrap Vue
  

• Element
  

• Framework7
  

• iView
  

• Vue Material
  

• Vuetify
  

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:

• ADempiere
  

• Bootstrap Vue (nothing)

• Element
  
  

• Framework7
  
  

• iView
  
  
  

• Vue Material
  

• Vuetify (nothing)

Autocomplete element can be used for a fast entry from search, see:
A little comparison between current UI from ADempiere and popular frameworks of Vue.js:

• ADempiere
  
• Bootstrap Vue
  
• Element
  
• Framework7
  
• iView
  
• Vue Material
  
• Vuetify
  
  

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:

• ADempiere

• Bootstrap Vue
  
  

• Element
  
  

• Framework7
  
  

• iView
  
  
  

• Vue Material
  
  

• Vuetify
  

Hello, it is necessary to migrate the entire component, this will support the data imported from gRPC and must comply with ADempiere standards.

• ADempiere
  

• Element-UI
  https://element.eleme.cn/2.7/#/en-US/component/input-number
  

• ADempiere-Vue
  

• ADempiere-Vue mode Mobile
  

Migration of the component input text using element and vuejs

The text field is currently displayed in the ZK client for ADempiere as follows

Element standard text component
https://element.eleme.io/#/en-US/component/input#basic-usage

Text component in the Vue client for ADempiere

Hello, it is necessary to migrate the cost + prices component, this will support the data imported from gRPC and conform to ADempiere standards.

ADempiere

Element-UI

ADempiere-Vue Desktop

ADempiere-Vue Mobile

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:

• ADempiere
  
  
  
  
• Element
  
  
• Framework7
  
  
  
• iView
  
  
  
• Vue Material
  
  
  
• Vuetify
  
  
  

Hi everybody, this is the fisrt issue for start this wonderful project for improve ADempiere UI with a reactive framework Vue.js

You are welcome to contribute and improve this project.

Best Regard.

This field has been deprecated, was added for save printer name searching from SO devices, now can be used as a Text component

A little comparison between current UI from ADempiere and popular frameworks of Vue.js:.

Combo Box is very used for select a item from list, it can be used for:

• Set and modify a values from array or list.
• Search a value inside list.
  Anatomy
  Label: Text for identity field.
  List: Saved values to show to user.
  Entry field: Allows typee keys for search result.

• ADempiere
  
• Bootstrap Vue (nothing)
• Element
  
  
• Framework7 (nothing)
• iView
  
  
• Vue Material
  
  
• Vuetify
  

It is proposed to migrate the tabs, changing the vertical design to the left for a horizontal design at the top. It is currently displayed as follows in the ZK client:

Viewing from a desktop screen:

Viewing from a mobile phone:

The standard component of element-ui to use is named tab, type edge letter (https://element.eleme.io/#/en-US/component/tabs#border-card):

This display of the new interface, are grouped the tabs with the same table name at the top and the other tabs at the bottom.

Viewing from a desktop screen:

Viewing from a mobile device: