Component Ideas

Login

• inputs
• • AIS Url (store in localStorage)
• • JDE User ID (store in localStorage)
• • JDE Password (store in sessionStorage)
• Output
• • AIS Url in localStorage (browser persistent)
• • JDE User ID in localStorage
• • JDE Password in sessionStorage (server-side session persistent)
• • Environment in sessionStorage (retrieved from /defaultconfig)
• • Webserver in sessionStorage (retrieved from /defaultconfig)
• • Ais Version in sessionStorage (retrieved from /defaultconfig)
• • Token in sessionStorage (retrieved from /tokenrequest)
• • User Name in sessionStorage (retireved from W01012B /formservice, using addressNumber from /tokenrequest if available)

Connection Manager

• • Events - handles a loggedIn event or checks for token in LS
• • Display - logged in state - user info - progress bar for system activity and login

Data Table

• • Title – String value for table title display
• • Columns – Object array with column meta information:
• • id: the column identifier that matches field names in the data object
• • numeric: boolean resulting in right or left aligning
• • padding: boolean for using padding or not
• • label: column header tekst
• • width: column width
• • Data – Object array with data records
• • OrderBy – Default column id for initial sorting
• • Order – Initial sorting specification ‘asc’ or ‘desc’
• • Selection – Boolean to activate selection checkboxes and selection functions as Delete, Edit, Copy
• • Theme – React using material-ui supports a ‘light’ or ‘dark’ look and feel theme
• • Transparent – Boolean to activate transparent component display
• • Pagination – Boolean to activate pagination functionality
• • OnDelete – Callback function when select action Delete was used
• • OnEdit – Callback function when select action Edit was used
• • OnCopy – Callback function when select action Copy was used

Form Builder

• A component that can create an HTML form from a JSON object
• callback to handle the data submitted

List to Edit Details

• combine the Data-Table and Form Builder to a find / edit UI pattern

Navigation / Appplication Manager

• Application bar title, branding and menu access. Also, theme toggle is managed here.
• • Open Menu – Boolean to toggle menu display
• • Menu Choice – Current selected menu option
• • Dark Theme – Boolean to mark ‘dark’ theme as current (‘light’ is default)
• • OnChange – Callback function to manage current theme and menu selection (to state)
• • Can manage global Appstate with events