SBD - Diagram refactor 3 of 5

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: 7.4 DXP U3
• Component/s: Product Information Management
• Labels:
  • frontend
• Business Value (single choice): 1
• Epic Link: Complete Shop by Diagram 1/2
• Story Points: 20
• Git Pull Request: https://github.com/liferay-frontend/liferay-portal/pull/1242

Tech note

The SBD component will be configurable, meaning that depending on where it's loaded, in admin pages or in store front pages, it will be

• READONLY Mode
• READ/WRITE Mode

ONLY FOR DIAGRAM COMPONENT

Acceptance Criteria

READONLY Mode

This mode is used in the store front and is activated by a configuration loaded while instatiating the component. It has following features:

• Pins visualization and listing
• Info on pin hover tooltip like
• no mapping feature
• no import feature
• no draggable pins

READ/WRITE Mode

This mode is used in the admin and is activated by a configuration loaded while instatiating the component. It has following features:

• Pins visualization and listing
• Info on pin hover tooltip like
• mapping feature
• import feature
• draggable pins
• CRUD operations on PINS

 

Double-Click Add Pin

 

isAdmin Layer 

 

 

---- # Product listing side panel:

1. 1. **made with dataset
   2. search feature
   3. import file?
   4. Event handling between Diagram and list

 
  this is a dataset. to not implement in this story.

no shapes for components (made in liferay)

• "Import File" (csv/json) to map skus on diagram TO DEFINE

 

 

Tooltip/Modal:

By clicking on the pin the tooltip/modal appears, presenting the form that configure the data:

• Label can be set/updated
• Quantity can be set/updated
• Select what to connect to this PIN SKU/Diagram
  • Depending on what's selecte a Sku/Diagram can be selected
  • While input text a fetch to Skus/Diagrams API is done, with autocomplete feature

This action will change the component state.
The pin is saved to the DB via API call. The API call is made by clicking the save button in the bottom of the modal. The modal is the one related to the selected pin.

Delete Pins:

Pins can be removed from Diagram, this action will change the component state.
Pin is deleted from the DB via API call. The API call is made by clicking the delete botton in the bottom of the modal. The modal is the one related to the selected pin.