LePatron is an opensource email builder allowing to industrialize your email template production. Build tailor made email templates and make them available to your non-technical users.
This feature will enable the saving of a customized block in the application. When a user confirms in the modal, the application will make a POST request to create a personalized block.
Implementation Details:
Retrieve GroupId within the Component:
Access the GroupId within the Vue Component:
Path: File where the save block modal is defined (e.g., save-block-modal.js).
Task:
Retrieve the groupId within the component using this.vm?.metadata?.groupId.
Integrate the Create Personalized Block Service:
Define a Function for the Create Personalized Block Endpoint:
Path: File where the service methods are defined (e.g., apis.js).
Task:
Define a function to return the API endpoint for creating a personalized block.
The function should accept parameters including name, category (optional), content, and groupId.
Implement the Save Block Method in the Component:
Path: File where the save block modal is defined (e.g., save-block-modal.js).
Task:
Modify the existing handleOnSubmit method to implement the save operation.
Use the groupId retrieved in step 1, along with other necessary block data, and make a POST request using the function defined in step 2.
Manage Loading, Success, and Error Statuses:
Handle Loading, Success, and Error States in the Component:
Path: Same file as above.
Task:
Loading State: Manage a loading state variable to show/hide a loading spinner within the modal during the saving process.
Success State: Upon successful saving, display a success toast notification using this.vm.notifier.success(message). Close the modal.
Error State: If the saving fails, display an error toast notification using this.vm.notifier.error(message). Keep the modal open to allow the user to retry or make changes.
Acceptance Criteria:
The groupId is successfully retrieved within the Vue component.
Clicking the confirm button in the modal triggers a POST request to create a personalized block using the required parameters.
The modal displays a loading state during the saving process, and appropriate toast notifications are shown for success or error.
The user is informed whether the save operation was successful or not, and the modal is closed only upon success.
Feature: Connect save Customized Block on editor
Description:
This feature will enable the saving of a customized block in the application. When a user confirms in the modal, the application will make a POST request to create a personalized block.
Implementation Details:
Retrieve GroupId within the Component:
save-block-modal.js
).groupId
within the component usingthis.vm?.metadata?.groupId
.Integrate the Create Personalized Block Service:
Define a Function for the Create Personalized Block Endpoint:
apis.js
).Implement the Save Block Method in the Component:
save-block-modal.js
).handleOnSubmit
method to implement the save operation.groupId
retrieved in step 1, along with other necessary block data, and make a POST request using the function defined in step 2.Manage Loading, Success, and Error Statuses:
this.vm.notifier.success(message)
. Close the modal.this.vm.notifier.error(message)
. Keep the modal open to allow the user to retry or make changes.Acceptance Criteria:
groupId
is successfully retrieved within the Vue component.Time Estimate:
0.5 / 1 day
Result
https://github.com/Badsender-com/LePatron.email/assets/80390318/4e1602e1-99c2-4550-8c25-55c1dd19b5f1