Badsender-com / LePatron.email

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.
https://www.lepatron.email
GNU General Public License v3.0
73 stars 12 forks source link

Feat connect create personnalized block #719

Closed omar-bear closed 1 year ago

omar-bear commented 1 year ago

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:

  1. 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:

  1. 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.
  2. 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:

  1. 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:

Time Estimate:

0.5 / 1 day

Result

https://github.com/Badsender-com/LePatron.email/assets/80390318/4e1602e1-99c2-4550-8c25-55c1dd19b5f1

sonarcloud[bot] commented 1 year ago

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
100.0% 100.0% Duplication