This plugin is part of the application process to work with Awesome Motive.
Front-end: Vue 3.3, using: vite, pinia, UnoCSS, Typescript, maska, Sass, date-fns, vue chart.js, vue router, zod and @vorms.
Back-end: Wordpress, using: WP Rest API, transients, options, translations.
- Translation to English and Brazilian Portuguese.
- Shared language object between WP and Vue.
- Shared nonce between WP and Vue.
- All routes require authenticated access.
- Route for updating the settings (using the PUT method).
- Settings are saved using options.
- Route for retrieving all the settings (using the GET method).
- Implemented a transient of 1 hour to enhance backend performance.
- Implemented checks to avoid saving duplicate emails.
- Implemented checks to avoid saving incorrect emails.
- Sanitized the human_date_format and rows values.
- Converted graph data to an array instead of an object.
- Typed all backend responses.
- Ensured that the plugin applies JS and CSS code only within its scope.
- Rows only accept numbers from 1 to 5. A custom mask has been created to prevent errors.
- Implemented a toggle box to provide better control over the checkbox.
- The form does not allow the submission of duplicate emails.
- Pinia is updated every time the form is successfully submitted, even on the /data route.
- Upon the initial load of the plugin, Pinia takes full control of the data.
- Provided translated error messages for enhanced user experience.
- After sending the request, a modal appears to indicate that the request is processing.
- The "Add" button is disabled when the list contains five emails.
- The "Minus" button is disabled when the list contains only one email.
- Sanitized the human_date_format and rows values.
- The user's email is shared between WP and Vue.
- WAI-ARIA principles applied in the form, to increase accessibility
- Converted graph data to an array for easier implementation.
- Converted dates to a human-readable format if the user selects this option.
- Implemented an animation for the Chart.js when the page loads.
- The table displays the specified number of rows.
- Translated the table header to enhance the user experience.
- Listed all emails in an unordered list.
- Created composables to enhance code quality.
- Provided translated message for users who have JavaScript blocked.
- Utilized HTML5 Dialog in the modal, which can be cancelled with the Escape button.
- Typed all props and emits in components.
- Typed the translation as well.
Clone the repository
git clone git@github.com:mateusavila/mateus-avila-isidoro.git
Go to the front-end
cd mateus-avila-isidoro
Install all the dependencies
pnpm install
Start the development server to run inside Wordpress
npm run develop