ergonode / frontend Goto Github PK

New mechanism for adding modules that extend application.

• Modularity is divided into two areas:
  • Components
  • Full pages
• Modules will be based on the module manager (NPM), it will be all public and accessible to all,
• Installation will be done in two ways:
  • CLI - a mechanism for installing basic modules (modules written by core team or accepted by core team). Installation by simple selection of modules. The mechanism installs a package from the npm and creates a configuration,
  • npm installation - all other modules not supported by Core Team,
• Modules will be based on the configuration file built during installation,
• Modules will have a directory structure compatible with vue/nuxt structure,
• Whole page modules can have their own sub-modules of specific components, which will work only with this specific page. You need a configuration to connect the entire page and components,
• Page modules must create their own routing (modification of default routing) and menu item,
• Any modifications must extend the existing nuxt configuration,
• Removing modules is done via CLI (uncheck). Custom modules will have to be removed manually from package.json and node_modules,

To do:

• build first local module use npm architecture,
• set global alias,
• build mechanism for reading the directory structure from the module and for loading full pages from the modules,
• creating a mechanism for building a configuration file
• mechanism for extending routing with additional modules
• extension of menu when a new page module appears
• extension of nuxt configuration with new modules
• move module to npm
• mechanism that allows to use in the module the core elements of the application,

As a user we would like to configure Grid resizing via backend configuration.

Application should not have possibility of resizing columns in each grid - backend configuration will determinate the state of resizing.

Configuration of grid is saved in configuration inside store/grid.

Deleting role button should be visible whenever the role is active
Integrate with BE API:
HTTP 422 code will return message why role cannot be removed

Bug type

Styling

Current behavior

bug reproduction - as we see image close to 'Jan' is not displaying. The image in select content is not displaying well, it's out of bounds.

Expected behavior

User image should be displayed on NavigationBar and user select menu

Environment

Ergonode version: 0.1.0

 
Detailed information:
- Node version: v11.12.0  
- Browser (Version): Chrome 
- Platform:  Mac OS 

Bug type

Code

Current behavior

Attributes -> Translations tab -> do F5 - Nuxt crash in production mode
error

Expected behavior

Nuxt should not crash after we reload the page.

Environment

Ergonode version: 0.1.1

 
Detailed information:
- Node version: v11.12  
- Browser (Version): Chrome 
- Platform: Mac  

Bug type

Styling

Current behavior

To see this bug you need to take following steps:

1. Product catalog
2. Edit one of products ->General options

Then you can see that first input box title is not fully visible

Expected behavior

Input box title should be visible entirely

Environment

Ergonode version: 0.1.0

 
Detailed information:
- Node version: 8.1  
- Browser (Version): Chrome 74.0.3729
- Platform: Linux  

Create a tab with privilege table for each role.
While editing a role, we see a tab with permissions.
Based on /dictionary/privileges .

At this moment we do have only search without any logic behind.
Search requirements:
List has groups:

• when none of group is expended, we filter only counts of elements in each group.
• when group is expanded, we filter also elements in it.
  List has no groups:
• We filter all elements

DatePicker and DateRangePicker has to have added new functionalities and updated layout:

• Choosing between months and years
• Hover states
• Selected styles

Motivation

As a user I would like to be able to pin columns to left or right side.

Solution

Detect position of grid column based on scroll position - in case that is about to leave the view port of grid it has to get left / right drop shadow and be sticked into the last visible place in view port.

Motivation

Each column header should float on scroll.

Solution

Make header cell sticky.

Motivation

As I user I would like to manage system settings from SideBar menu position.

Functionalities

• Create tab with translations settings

When move category to tree designer the not disabled on category list.

Bug type

Styling

Current behavior

• Grid placeholder for none records is overlapping at column headers
• Grid columns (edit column) has no background color

Expected behavior

Grid placeholder should not overlap over grid columns
Grid columns should have background colors

Environment

Ergonode version: 0.1.1

 
Detailed information:
- Node version: v11.11  
- Browser (Version): Chrome 
- Platform: Mac 

Activity status will be in next release
We should hide this field in this release

Add:

• Head title

• App Icon

Dashboard boxes are visible , but i don't have privileges to occured an action on them.

Bug type

Code

Current behavior

When we enter to edit mode of the Unit attribute - it will not have displayed unit

Expected behavior

Editing unit attribute should have chosen Unit type

Ergonode version: 0.1.1

 
Detailed information:
- Node version: v11.11 
- Browser (Version): Chrome 
- Platform: Mac 

Motivation

As a user I would like to be able to choose price range

Functionalities

• Can slide from left to right
• Can slide in both directions
• Can represent range
• Handle value change on clicked tracker line
• Scaling dragged sphere

Motivation

User should be described by roles. User may have more than one role assigned.

Tasks:

• Create additional tab for Users page / tab should display all of the roles in application

Create a tab to add and edit roles.
Data required to create/edit the role:
* Name - required, max length 100
* Description - required, max length 500

On category list and attribute list exist search field , but there is no logic for search.
Hide this field.

Grid columns - between Template and Edit there is extender column it has to be non interactive. At this moment we can do interactions - it should not be allowed.

• change the appearance of categories
• change ghost element presentation
• create connection lines between categories

Motivation

As we expend our inputs with new functionalities the abstraction which is above everything is too high - each change can make other problems.

Solution

Divide BaseInput into BaseInput and BaseSelectInput

Motivation

As a user / admin I would like to see my / all activity logs made in application

Solution

• for user activity logs create next tab with grid in user page
• for user activity logs add tab with grid to users page

The aim of the task is to adjust the appearance of the category tree and its functionality to the existing elements of the application.

Frontend

• Adapting functionality to changed behavior of layout elements,
• Placing a new bottom bar and adjusting it to the whole layout of the application. The bottom bar is used to place any action buttons on it,
• Improvement of scroll bar elements in layout, mainly improvement of styles,
• Refactorisation of codes and algorithms associated with main layout and the dependencies between components,
• Adaptation of the category tree page to routing and placing a new item in the menu,
• Improvement of the basic errors occurring in the drag & drop mechanisms on the category tree,
• Repair of problems related to the category interactions on the grid section, improvement of behaviour during the handling of elements,
• To improve the behaviour of an element referred to as 'ghostElement' that determines where a category is dropped
• Adding a mechanism for transferring categories from grid sections to a section with a list of categories
• When we drag element and we have collapse parent category then mouse position is incorrect and ghost element appear in wrong place,

Backend

• Connection with real data from backend
• Mapping data from backend to correct structure

• Both of the components should be independent from Vuex Store
• ToolBar should be changed to NavigationBar:
• SideBar should be changed to Menu
• Improvement code quality / readability

We need to add field with activity status. The field is going to be added in User creation / editing tab.

Motivation

Icons in application are transformed to CSS classes which is not efficient enough. We cannot edit them directly in Vue components.

We need to support icons in different way:

• icons have to support animations
• icons have to be more flexible

Solution

Vue docs

Motivation

As a user I would like to have product with statuses. The statuses would be telling on which state / progress the product is.

Solution

• Grid with statuses in 'Workflows' - SideBar component
• Creation / Edition page for status
• Presenting status column at product grid

Motivation

As a user I would like to have possibility of managing many trees.

Solution

• Create grid with category trees
• Being able to enter in category tree editing mode from grid
• Being able to create new tree from grid
• Each tree should have translation tab

The goal is to unify Template Designer creation.

• At this moment we cannot drag section from list of Attributes placed on the left hand side of Template Designer.
• Layout elements has odd x positions and sections even x positions - it should have no difference in x positions / everything should be layout element which is flexible with x positions

Frontend

• Create new separator attribute / layout element - It might be treated as section title

Layout Grid:

• New grid layer
• New highlights for places when we can drop attributes / layout elements
• New placeholder / ghost item when we are willing to drop / end resizing attribute / layout element
• When we dragged attribute / layout element from template it should left grey placeholder to tell the user from which place element was dragged

Integration with Backend

• Change mapper for updated data - atm section titles have even x positions and the layout elements have odd x positions
• Prepare new data to send on save

EDIT

• Removed concept of greyish placeholder ondragstart layout element - it will prevent from being not able to move bigger elements than 1x1 with only 1 position. Elements ondragstart going to be removed from dragged position.
• Update product template based on new API structure

• Readme update for installation sections
• New CLI script

Motivation

As a user I would like to select Checkbox with spacebar. At this moment our Checkbox component is written by using div tag - we would need to add additional logic which is provided by native API.

Solution

Instead of div based checkbox use native checbox tag.

Motivation

As a user I would like to see different areas in application based on granted privileges

Solution

• Create basic mechanism for checking if user has access to specified area
• Adapt mechanism for whole application
• Add routing validation - error page
• Add badge to navigation header which will inform user about preview mode

Motivation

There might be more than 1 grid in page, as long as we do not create store for each grid we cannot achieve it.

Solution

For each Grid register different Vuex store.

Motivation

As a user I would like to manipulate line in horizontal direction by starting drag on limit of the column's header cell.

Requirements

Manipulating horizontal line

• cannot be placed before minimal value of column width
• cannot be affecting grid layout - we do not want mutate anything in grid.
• should be shown after mouse hover on column limit - line edge

Adapting flexbox in firefox browser.

• Inputs
• Grids

Description

Grid doesn't support attributes with parameters. We cannot validate columns with price, unit, date without knowing what kind it is.

Solution

• Add validation support to Grid cells
• Grid cells should give visual feedback about what kind of attribute value it is

When category is moved a label of a different one tend to appear randomly on a grid.

Multilingual attributes were not working well. The API wasn't working well.

Request URL: http://127.0.0.1:8000/api/v1/EN/attributes/0eb39caf-df7f-5069-a662-5fe168f20ded

In both aspects multilingual, non multilingual the data received was same - not optimized at all.

Old:

{  
   "id":"0eb39caf-df7f-5069-a662-5fe168f20ded",
   "code":"multilingualcode",
   "type":"MULTI_SELECT",
   "label":[  

   ],
   "hint":[  

   ],
   "placeholder":[  

   ],
   "multilingual":true,
   "groups":[  
      "6289dcd0-da67-42ed-a32b-d98ca47b4587",
      "8b9e44cc-3c0d-4f24-8fca-bd03904041d9"
   ],
   "options":[  
      {  
         "key":"key1",
         "translation":{  
            "EN":"value1"
         }
      },
      {  
         "key":"key2",
         "translation":{  
            "EN":"value2"
         }
      }
   ]
}

In new version it is going to look like:

New multilingual:

{  
   "id":"0eb39caf-df7f-5069-a662-5fe168f20ded",
   "code":"multilingualcode",
   "type":"MULTI_SELECT",
   "label":[  

   ],
   "hint":[  

   ],
   "placeholder":[  

   ],
   "multilingual":true,
   "groups":[  
      "6289dcd0-da67-42ed-a32b-d98ca47b4587",
      "8b9e44cc-3c0d-4f24-8fca-bd03904041d9"
   ],
   "options":[  
      {  
         "key":"key1",
         "value":{  
            "EN":"value1"
         }
      },
      {  
         "key":"key2",
         "value":{  
            "EN":"value2"
         }
      }
   ]
}

New non multilingual:

{  
   "id":"0eb39caf-df7f-5069-a662-5fe168f20ded",
   "code":"multilingualcode",
   "type":"MULTI_SELECT",
   "label":[  

   ],
   "hint":[  

   ],
   "placeholder":[  

   ],
   "multilingual":true,
   "groups":[  
      "6289dcd0-da67-42ed-a32b-d98ca47b4587",
      "8b9e44cc-3c0d-4f24-8fca-bd03904041d9"
   ],
   "options":[  
      {  
         "key":"key1",
         "value": value1,
      },
      {  
         "key":"key2",
         "value": value2,
      }
   ]
}

Motivation

As a user I would like to be able to pick color from menu

Solution

Based on InputSelectBase component we need to create select with menu which will contain colors passed as a prop.
The component is going to have same functionalities as Select.

Create / Edit user should have additional select field which will present available roles.
Roles will come from Grid Roles - filter grid by name - we do not need all of the data.

Toggler component has to have disabled style for two states

• Prepare "access denied'" screen similar as 404 template.
• Create mechanism to check the routing for permissions.

Bug type

Code

Current behavior

Product template card doesn't display multiselects - only selects are displayed.

Expected behavior

Received attribute type "MULTI_SELECT" should be mapped as MultiSelect component instead of Select

Possible Solution

Select component should have set multiselect flag when the attribute type is "MULTI_SELECT"

Environment

Ergonode version: 0.1.0

 
Detailed information:
- Node version: v11.12.0  
- Browser (Version): Chrome 
- Platform:  Mac OS 

Bug type

Style

Current behavior

Login forms inputs are stretched
Reproduction

Expected behavior

Inputs should not be stretched
Instead of flex - it is better to use display grid

Environment

Ergonode version: 0.1.0

 
Detailed information:
- Node version: v11.12.0  
- Browser (Version): Firefox 
- Platform:  Mac 

Others:

Is your feature request related to a problem? Please describe.

It is hard to debug Vuex store. Some of the actions / mutations are named as: setAction. The readability is low.

Describe the solution you'd like

The solution is described in: example

Teachability, Documentation, Adoption, Migration Strategy

Migration strategy:

• Rewrite module by module
• Each module should have file with commit names assigned to variables.
• Refactor actions / mutations
• Added missing mutations - removing setActions
• Removing duplicated code

Modules to need to be improved:

• alerts
• attribute
• authentication
• categories
• data
• draggable
• grid
• gridDraft
• list
• productsDraft
• templateDesigner
• templateLists
• translations
• tree
• users
• validations

What is the motivation / use case for changing the behavior?

Code readability / refactor / easier debugging via Vuex devtools

Bug type

Code, Architecture

Current behavior

VueTyper plugin is making SSR crash.
Logout generate VuexStore error / computed property is getting null value - clearing store is not placed well.
Editing Image attribute in Grid is not possible - doesn't display added image. We are not able to add image from desktop by drag and drop.
Editing cell do not have correct layout sizes.
Drafts doesn't behave correctly - they are not updating correct values.
Editing Select Attribute is crashing on 'Clear' button clicked.

Environment

Ergonode version: 0.1.0
 
Detailed information:
- Node version: v11.12.0
- Browser (Version): Chrome Version 74.0.3729.169 (Official Build) (64-bit)
- Platform:  Mac